javascript - 为什么我所需的库没有从 ES6 转换为 ES5？

Question

我正在编写一个 react 应用程序，我在另一个使用 ES6 语法的库中 require 。这是我使用该库的代码:

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

var appts = [];

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

horario-calendar 是第三方应用程序，它充满 ES6 语法。我有一个 gulp 任务，应该将所有代码转换为 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));
    });
};

但它不会通过 require 中的代码进行转译。它只是转译我的代码。我仍然在 horario-calendar 中导入了 ES6 样式。我还需要做什么才能转译该代码？

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