npm - gulp: babelify 运行没有错误，但不转换我的节点模块

Question

我是:

• 与 browserify 捆绑

• 使用 babel 将 ES6 转换为 ES5

• 使用 uglifyjs 压缩 ES5

以前有效。然而最近我一直收到 uglifyjs 的错误，提示 ES6 语法，就好像 babelify 没有真正运行一样:

gulp.task('js', function() {

    // Browserify/bundle the JS.
    browserify({
        entries: './public/js/src/index.js',
        insertGlobals : true,
        fullPaths: true, // For discify
        debug: ! isProduction
    }).transform(babelify)
        .bundle()
        .pipe(source('index.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest('./public/js/dist'))

});

为什么 transform(babelify) 不转换代码？

请给出实际答案，而不是剪切和粘贴 gulpfiles。

Answer 1

问题是使用 npm 模块:babel ignores npm modules by default .因此，如果模块是 ES6，那么当 uglify 运行时它们仍然是 ES6。

升级 babel 并使用 the global option有固定的东西:

gulp.task('js', function() {

    browserify({
        entries: './public/js/src/index.js',
        insertGlobals : true,
        fullPaths: true, // For discify
        debug: ! isProduction
    }).transform(babelify, {
            presets: ['es2015'],
            compact: false,
            global: true
        })
        .bundle()
        .pipe(source('index.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest('./public/js/dist'))
})

另一种选择是将它放在私有(private)模块的 package.json 中。请注意语法很奇怪，并且使用数组而不是对象来将项目与其选项相匹配:

{
  "browserify": {
    "transform": [
       [
         "babelify", 
          { "presets": ["es2015"] }
       ]
     ]
  }
}

参见 babelify docs获取更多信息。