Browserify transile需要或导入包到es2015

Question

我们有一个利用进口的项目,并要求通过NPM包含各种第三方包.一些软件包都写在ES6,我们需要他们下来transpiled到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。（还有其他选项，例如only我们是否只想转换几个 node_modules。（您还可以添加更多插件和预设，但这取决于您和您使用 babel 进行转换的配置。