浏览transpile或导入到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一起做过这件事，用巴别塔加载程序很容易。

我担心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转换配置。