javascript - 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 维护一个官方转换称为 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 任务中配置 bundler (删除包配置，尽管使用包对此完全没问题)，检查他们的文档和实验，我'我以前做过，但我已经很久没有使用 gulp(在这里使用 gulp 只是一个你不需要的复杂问题，但我希望你在构建管道的其他地方使用它可能更有帮助)。