1

我正在编写一个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由required 中的代码 ing。它只是transpileing 我的代码。我仍然ES6在horario-calendar. 我还需要transpile对该代码做什么？

4

2 回答 2

0

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

如果 opts.global 为真，则转换将对所有文件进行操作，无论它们是否存在于 node_modules/ 目录中的上一级。谨慎而谨慎地使用全局变换，因为大多数时候普通变换就足够了。您也不能像使用普通转换那样在 package.json 中配置全局转换。

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

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

另外，6to5（现在是 Babel）有内置的 JSX 支持，所以你不需要 Reactify。

于 2015-02-15T17:50:43.853 回答
0

我会推荐使用 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 文件中使用箭头函数，所以请注意这一点。

于 2015-02-15T12:07:52.660 回答