Browserify 将所需或导入的包编译到 es2015

Question

我们有一个项目，它利用导入并需要通过 NPM 包含各种第三方包。其中一些包是用 es6 编写的，我们需要将它们转译为 es5/es2015 以便在 IE11 等浏览器中工作，因为一些包使用 => 箭头语法来表示函数。

我们自己的代码使用箭头语法，但它正在通过 browserify 转换为更普遍支持的语法。问题是我们导入的包，例如camelcase-keys，没有被转译，而是包含在它们的原始格式中。

这对于 Chrome 和 Edge 等浏览器来说很好，但对于 IE，它会中断，因为不支持该语法。

这是我们当前的 package.json 和 gulpfile.js。如果您需要任何进一步的信息，请告诉我。

package.json

{
  "name": "app",
  "private": true,
  "dependencies": {
    "angular": "^1.6.4",
    "angular-auto-complete": "^1.4.3",
    "angular-input-masks": "^4.1.0",
    "angular-moment": "^1.0.1",
    "angular-route": "^1.6.4",
    "angular-sanitize": "^1.6.6",
    "angular-strap": "^2.3.12",
    "animate.css": "^3.5.2",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "bootstrap-select": "^1.12.4",
    "bugsnag-angular": "^1.0.1",
    "bugsnag-js": "^4.0.3",
    "camelcase-keys": "^4.2.0",
    "date-holidays": "^1.2.1",
    "font-awesome": "^4.7.0",
    "moment": "^2.19.3",
    "ng-file-upload": "^12.2.13",
    "ng-storage": "^0.3.2",
    "papaparse": "^4.3.7",
    "snakecase-keys": "^1.1.0",
    "summernote": "^0.8.9",
    "sweetalert": "^2.0.8",
    "uuid": "^3.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-plugin-transform-es2015-classes": "^6.24.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babelify": "^8.0.0",
    "browserify": "^14.5.0",
    "gulp": "^3.9.1",
    "gulp-angular-templatecache": "^2.0.0",
    "gulp-cache-bust": "^1.1.0",
    "gulp-concat": "^2.6.1",
    "gulp-if": "^2.0.2",
    "gulp-rm": "^1.0.2",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.1.2",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "yargs": "^8.0.1"
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015"
          ],
          "plugins": [
            "transform-es2015-classes"
          ]
        }
      ]
    ]
  }
}

gulpefile.js

const gulp          = require('gulp'),
      concat        = require('gulp-concat'),
      uglify        = require('gulp-uglify'),
      rm            = require('gulp-rm'),
      browserify    = require('browserify'),
      template      = require('gulp-angular-templatecache'),
      bust          = require('gulp-cache-bust'),
      gulpif        = require('gulp-if'),
      sass          = require('gulp-sass'),
      argv          = require('yargs').argv,
      source        = require('vinyl-source-stream'),
      buffer        = require('vinyl-buffer');

gulp.task('images', function() {
    return gulp.src('assets/images/**/*.*').pipe(gulp.dest('public/images'));
});

gulp.task('fonts', function() {
    return gulp.src([
        'assets/fonts/**/*.*',
        'node_modules/bootstrap-sass/assets/fonts/**/*.*',
        'node_modules/font-awesome/fonts/*'
    ]).pipe(gulp.dest('public/fonts'));
});

gulp.task('html', function() {
    return gulp.src('app/**/*.html').pipe(template({ module: 'app' })).pipe(gulp.dest('public/js'));
});

gulp.task('sass', function () {
    return gulp.src([
        'node_modules/font-awesome/css/font-awesome.css',
        'assets/styles/app.scss'
    ]).pipe(sass()).pipe(concat('app.css')).pipe(gulp.dest('public/css'));
});

gulp.task('js', function() {
    return browserify({
        entries: ['./app/app.js'],
        paths: ['./node_modules', './app/']
    })
        .bundle()
        .pipe(source('app.js'))
        .pipe(buffer())
        .pipe(gulpif(argv.production, uglify()))
        .pipe(gulp.dest('./public/js'));
});

gulp.task('wysiwyg', function() {
    return gulp.src('./node_modules/summernote/dist/summernote.min.js')
        .pipe(concat('wysiwyg.js'))
        .pipe(gulp.dest('public/js'));
});

gulp.task('bust', function() {
    return gulp.src('./public/index.php').pipe(bust({ type: 'timestamp' })).pipe(gulp.dest('./public/'));
});

gulp.task('default', function() {
    return gulp.start(['images', 'fonts', 'html', 'sass', 'js', 'wysiwyg', 'bust']);
});

gulp.task('basic', function() {
    return gulp.start(['html', 'sass', 'js', 'bust']);
});

gulp.task('watch', function() {
    gulp.start(['default']);

    gulp.watch('assets/styles/**/*.scss', {cwd: './'}, ['sass']);
    gulp.watch('assets/images/**/*.*', {cwd: './'}, ['images']);
    gulp.watch('assets/fonts/**/*.*', {cwd: './'}, ['fonts']);
    gulp.watch('app/**/*.html', {cwd: './'}, ['html']);
    gulp.watch('app/**/*.js', {cwd: './'}, ['js']);
});

Answer 1

我之前使用 Webpack 完成了此操作，使用 babel-loader 非常容易。

我担心 browserify 自己无法转译所有 ES6 语法……但有人为此创建了 babelify！

使用 babelify 你可以做类似的事情：

gulp.task('js', function() {
return browserify({
    entries: ['./app/app.js'],
    paths: ['./node_modules', './app/']
})
    .transform(babelify, {
        global: true,
        presets: ["es2015"]
     })
    .bundle()
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(gulpif(argv.production, uglify()))
    .pipe(gulp.dest('./public/js'));
});

我们需要使用global 标志来强制browserify 的转换通过node_modules。 （如果我们只想转换几个 node_modules，还有其他选项，例如 only。（您也可以添加更多插件和预设，但这取决于您和您的 babel 转换配置。