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';

我猜这是因为巴贝尔(并且是它的use strict补充),但我该怎么办？

Answer 1

巴贝尔维持官方变换Browserify称为babelify,它应该如使用巴贝尔和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只是一个你不需要的复杂功能,但我希望你在构建管道的其他地方使用它可能会更有帮助).