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添加），但我该怎么办？

- Tomek Buszewski

---

改变顺序（将Babel放在Browserify之前）有帮助吗？ - JCOC611

不，我尝试过这个了，移除 babel 也没有帮助。 - Tomek Buszewski

不是答案，但你尝试使用 https://github.com/babel/babelify 了吗？ - Misiur

你需要使用babel 6创建一个.babelrc文件。 - PhilVarg

Browserify 能够操作 Common JS 模块。您使用的是 ES6 模块。在使用 Browserify 之前，您需要将 ES6 模块转换为 CommonJS。 - Jencel

你可能应该详细说明如何做。最简单的方法是使用babelify。我试图在你的答案下发表评论，Bobby。 - Matt Styles

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任务内部配置捆绑程序（放弃包配置，尽管对于此使用包是完全可以的），请检查他们的文档并进行实验，我以前做过这件事，但自从我使用gulp以来已经很长时间了（在此处使用gulp只是您不需要的复杂化，但我希望您在构建流水线的其他地方使用它可能更有帮助）。

- Matt Styles