使用 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/

您通常需要指定一个入口点，然后捆绑器会解析所有依赖项并创建一个 js 文件。

编辑：

使用 browserify 的 gulp 任务示例：

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