Browserify 和 Babel gulp 任务答案

【问题标题】：Browserify and Babel gulp tasksBrowserify 和 Babel gulp 任务
【发布时间】：2015-12-14 21:04:48
【问题描述】：

我想在我的 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 加法），但我该怎么办？

【问题讨论】：

改变顺序（在browserify之前放置babel）有帮助吗？
不，我试过了，删除 babel 也无济于事。
不是答案，但您是否尝试使用 github.com/babel/babelify 代替？
你需要用 babel 6 制作一个.babelrc 文件
Browserify 与 Common JS 模块一起工作。您正在使用 ES6 模块。在使用 Browserify 之前，您需要将 ES6 模块转换为 commonJS。

标签： javascript gulp browserify babeljs

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

【讨论】：