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

我是:

与browserify捆绑

使用babel

将ES6转换为ES5

使用uglify.js精简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。

最佳答案

问题是使用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'))
})

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

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

有关更多信息，请参见babelify docs。