Browserify переносить необходимые или импортированные пакеты в es2015

Question

У нас есть проект, который использует импорт и требует включения различных сторонних пакетов через NPM. Некоторые из этих пакетов написаны на es6, и нам нужно, чтобы они были перенесены в es5/es2015 для работы в браузерах, таких как IE11, потому что некоторые пакеты используют => синтаксис стрелки для функций.

Наш собственный код использует синтаксис стрелок, но он передается через браузер в более универсально поддерживаемый синтаксис. Проблема в том, что наши импортированные пакеты, такие как 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.