Rollup, Gulp и Babel (ES6) за 1 минуту

Установка

Начните с установки Babel, Gulp, Gulp File, Rollup, Rollup Babel и нескольких предустановок:

npm i -D babel-core gulp gulp-file rollup rollup-plugin-babel babel-preset-es2015 babel-preset-es2015-rollup

Конфигурация

Настройте Babel (и Gulp) на использование предустановки es2015 в вашем .babelrc:

{
  "presets": ["es2015"]
}

Затем в вашем gulpfile.babel.js скажите Rollup использовать rollup-plugin-babel и игнорировать глобальные .babelrc настройки.

rollup({
    entry: 'app.js',
    plugins: [
      babel({
        presets: [
          [
            "es2015", {
              "modules": false
            }
          ]
        ],
        babelrc: false,
        exclude: 'node_modules/**'
      })
    ]
  });

Строить

Собрав все это вместе, вы затем сгенерируете пакет и скажете gulp записать файл в файловую систему.

import gulp from 'gulp';
import file from 'gulp-file';
import { rollup } from 'rollup';
import babel from 'rollup-plugin-babel';
gulp.task('build', function() {
  return rollup({
    entry: 'app.js',
    plugins: [
      babel({
        presets: [
          [
            "es2015", {
              "modules": false
            }
          ]
        ],
        babelrc: false,
        exclude: 'node_modules/**'
      })
    ]
  })
  .then(bundle => {
    return bundle.generate({
      format: 'umd',
      moduleName: 'myModuleName'
    })
  })
  .then(gen => {
    return file('app.js', gen.code, {src: true})
      .pipe(gulp.dest('dist/'))
  });
});

Закрытие

Я потратил время на переходы между различными документами проекта и плагина, чтобы найти рабочее решение. Возможно, я пропустил шаг.

Если вы следуете этим инструкциям и обнаружите, что это не работает для вас, сообщите мне об этом в комментариях ниже. Вы также можете найти меня на GitHub @AndrewHenderson

Наконец, если этот пост вам помог, не забудьте порекомендовать его, хлопая в ладоши! :)