Question

我正在编写一个react应用，其中我require在另一个使用ES6语法的库中。这是我使用lib的代码：

var React = require('react');
var Calendar = require('horario-calendar');

var appts = [];

React.render(<Calendar />, document.getElementById('calendar'));

horario-calendar是第三方应用，它充满了ES6语法。我有一个gulp任务，应该transpile ES6的所有代码。这是任务：

var browserify = require('browserify');
var reactify = require('reactify');
var source = require('vinyl-source-stream')
var to5 = require('6to5ify');

module.exports = function(gulp, config) {
    gulp.task('browserify', function() {
        browserify(config.app.src, {debug: true})
            .transform(to5)
            .transform(reactify)
            .bundle()
            .pipe(source(config.app.bundleName))
            .pipe(gulp.dest(config.app.bundle));
    });
};

但它不是transpile代码require d。它只是transpile我的代码。我仍然在ES6中导入horario-calendar个样式。我还需要对transpile代码做什么？

Answer 1

我建议使用webpack而不是Browserify - 您还可以享受JSX热加载器带来的好处。 https://github.com/babel/6to5-loader开箱即用，但我确实取代了这个：

{ test: /\.js$/, exclude: /node_modules/, loader: '6to5-loader'}

在他们的例子中，对此：

{ test: /\.jsx$/, exclude: /node_modules/, loader: '6to5-loader'}

因为我碰巧只使用.jsx文件中的箭头功能，所以请注意。

Answer 2

理想情况下，此负担将由第三方库承担，但如果这不是一个选项，您可以尝试使用global transforms：

如果opts.global为true，则转换将对所有文件进行操作，   尽管它们是否存在于node_modules /目录中的某个级别。   从大多数时候开始，谨慎而谨慎地使用全局变换   普通的变换就足够了。您也可以不配置全局   像普通变换一样在package.json中进行转换。

全局变换总是在任何普通变换运行后运行。

所以用.transform(to5)替换.transform({ global: true }, to5)。

此外，6to5（现为Babel）内置了JSX支持，因此您不需要Reactify。

为什么我的必需库未从ES6转换为ES5？

2 个答案: