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只是一个你不需要的复杂功能，但我希望你在构建管道的其他地方使用它可能会更有帮助）。

Browserify和Babel gulp任务

1 个答案: