javascript - 使用 Gulp 和 Babel 导入和转换 JS 文件

Question

考虑以下文件:

//foo.js
(function(){
  console.log('working');
})();

//bar.js
import 'foo.js';

现在我正在使用 gulp 从 ES6 编译到 ES5。这是相关任务:

gulp.task('build-js', function() {
  return gulp.src('bar.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(gulp.dest('./dist'));
});

我的输出文件如下所示:

'use strict';
require('foo.js');

这不是我预期的结果。我希望使用 ES5 转换将所有代码导入到单个输出文件中。这样，单个 JS 文件就可以在浏览器中加载并正确运行。我需要做什么才能获得预期的结果？

由于 bar.js 仅导入 foo.js，因此输出文件应该与 foo.js 完全一样。此外，由于 foo.js 仅包含一个自执行函数，输出文件应立即执行此函数并将 working 记录到控制台。

Answer 1

如果您想为浏览器创建一个文件，您应该添加一个“捆绑”任务。看看 browserify 或 webpack。

http://browserify.org/ https://webpack.github.io/

您通常需要指定一个入口点， bundler 会解析所有依赖项并创建一个单独的 js 文件。

编辑:

gulp 的示例任务，使用 browserify:

var browserify = require('gulp-browserify');
gulp.task('bundle', function() {
    gulp.src('./dist/bar.js') // entry point
        .pipe(browserify())
        .pipe(gulp.dest('./dist'))
});