为什么我需要的库没有从 ES6 转换为 ES5？答案

【问题标题】：Why are my required libs not being converted from ES6 to ES5?为什么我需要的库没有从 ES6 转换为 ES5？
【发布时间】：2015-04-15 13:35:28
【问题描述】：

我正在编写一个react 应用程序，其中我在另一个使用ES6 语法的库中require。这是我使用 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));
    });
};

但不是transpileing 的代码是required in。它只是transpileing 我的代码。我仍然有ES6 样式导入全部在horario-calendar 中。我还需要对transpile 那个代码做什么？

【问题讨论】：

标签： javascript reactjs gulp ecmascript-6 babeljs

【解决方案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 文件中使用箭头函数，所以要小心。

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：