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'))
})

另一种选择是将此package.json放入您的私有模块中。请注意语法很奇怪，并使用数组而不是对象将项目与其选项匹配：

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

有关详细信息，请参阅babelify docs。

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

1 个答案: