Browserify 和 Babel gulp 任务

Question

我想在 JavaScript 中同时使用 Browserify 和 Babel。为此，我创建了一个 gulp 任务

gulp.task('babel', function() {
    return gulp.src('_babel/*.js')
        .pipe(browserify({ insertGlobals : true }))
        .pipe(babel({ presets: ['es2015'] }))
        .pipe(gulp.dest('_dev/js'));
});

不幸的是，当我想在我的代码中使用 import 时，出现错误：

ParseError: 'import' and 'export' may only appear at the top level

我的主要js文件很简单：

import 'directives/toggleClass';

我猜是因为 Babel（而且是 use strict 添加），但我能做什么？

Answer 1

Babel 为 Browserify called babelify 维护了一个官方转换，如果使用 babel 和 browserify，应该尽可能使用它。

直接放弃使用babel，将babelify作为browserify的转换插件。有很多方法可以配置 browserify，但在 package.json 中指定配置可能是最简单的。

"browserify": { 
  "transform": [["babelify", { "presets": ["es2015"] }]]
}

您的 gulp 任务将得到简化

gulp.task('babel', function() {
    return gulp.src('_babel/*.js')
        .pipe(browserify({ insertGlobals : true }))
        .pipe(gulp.dest('_dev/js'));
});

Browserify 还公开了以编程方式执行此操作的方法，因此您将能够从 gulp 任务内部配置捆绑器（删除包配置，尽管使用包对此完全没问题），检查他们的文档和实验，我以前做过，但自从我使用 gulp 以来已经有很长时间了（在这里使用 gulp 只是你不需要的复杂功能，但我希望你在你的其他地方使用它在可能更有帮助的地方构建管道）。

Browserify 和 Babel gulp 任务

Browserify and Babel gulp tasks

javascript

gulp

browserify

babeljs