gulp + gulp-better-rollup + rollup 构建 ES6 开辟环境

关于 Gulp 就不过量烦琐了。经常运用的 js 模块打包东西重要有 webpack、rollup 和 browserify 三个，Gulp 构建 ES6 开辟环境一般须要借助这三者之一来兼并打包 ES6 模块代码。因而，Gulp 构建 ES6 开辟环境的计划有许多，比方：webpack-stream、rollup-stream 、browserify等，本文报告运用 gulp-better-rollup 的构建历程。gulp-better-rollup 能够将 rollup 更深切地集成到Gulps管道链中。

GitHub地点：https://github.com/JofunLiang/gulp-translation-es6-demo

构建基本的 ES6 语法转译环境

起首，装置 gulp 东西，敕令以下：

$ npm install --save-dev gulp

装置 gulp-better-rollup 插件，因为 gulp-better-rollup 须要 rollup 作为依靠，因而，还要装置 rollup 模块和 rollup-plugin-babel（rollup 和 babel 之间的无缝集成插件）：

$ npm install --save-dev gulp-better-rollup rollup rollup-plugin-babel

装置 babel 中心插件:

$ npm install --save-dev @babel/core @babel/preset-env

装置完成后，设置 .babelrc 文件和 gulpfile.js文件，将这两个文件放在项目根目录下。

新建 .babelrc 设置文件以下：

{
  "presets": [
    [
      "@babel/env",
      {
        "targets":{
          "browsers": "last 2 versions, > 1%, ie >= 9"
        },
        "modules": false
      }
    ]
  ]
}

新建 gulpfile.js 文件以下：

const gulp = require("gulp");
const rollup = require("gulp-better-rollup");
const babel = require("rollup-plugin-babel");

gulp.task("babel", () => {
  return gulp.src("src/**/*.js")
    .pipe(rollup({
      plugins: [babel()]
    },{
      format: "iife"
    }))
    .pipe(gulp.dest("dist"))
})

gulp.task("watch", () => {
    gulp.watch("src/**/*.js", gulp.series("babel"))
})

gulp.task("default", gulp.series(["babel", "watch"]))

在 src 目录下运用 ES6 语法新建 js 文件，然后运转 gulp 默许使命，搜检 dist 下的文件是不是编译胜利。

运用 ployfill 兼容

经由上面的构建历程，胜利将 ES6 语法转译为 ES5 语法，但也仅仅是转换的语法，新的 api（如：Set、Map、Promise等） 并没有被转译。关于 ployfill 兼容能够直接在页面中引入 ployfill.js 或 ployfill.min.js 文件完成，这类体式格局比较简单，本文不再赘述，下面讲下在构建中的完成体式格局。

装置 @babel/plugin-transform-runtime 、@babel/runtime-corejs2 和 core-js@2（注重：core-js的版本要和@babel/runtime的版本对应，如：@babel/runtime-corejs2对应core-js@2）。@babel/plugin-transform-runtime 的作用主如果防止污染全局变量和编译输出中的反复。@babel/runtime（此处指@babel/runtime-corejs2）完成运转时编译到您的构建中。

$ npm install --save-dev @babel/plugin-transform-runtime @babel/runtime-corejs2 core-js@2

修正 .babelrc 文件：

{
  "presets": [
    [
      "@babel/env",
      {
        "targets":{
          "browsers": "last 2 versions, > 1%, ie >= 9"
        },
        "modules": false
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime", {
        "corejs": 2
      }
    ]
  ]
}

同时修正 gulpfile.js 文件，给 rollup-plugin-babel 设置 runtimeHelpers 属性以下：

const gulp = require("gulp");
const rollup = require("gulp-better-rollup");
const babel = require("rollup-plugin-babel");

gulp.task("babel", () => {
  return gulp.src("src/**/*.js")
    .pipe(rollup({
      plugins: [
        babel({
          runtimeHelpers: true
        })
      ]
    },{
      format: "iife"
    }))
    .pipe(gulp.dest("dist"))
})

gulp.task("watch", () => {
    gulp.watch("src/**/*.js", gulp.series("babel"))
})

gulp.task("default", gulp.series(["babel", "watch"]))

再装置 rollup-plugin-node-resolve 和 rollup-plugin-commonjs，这两个插件重要作用是注入 node_modules 下的基于 commonjs 模块规范的模块代码。在这里的作用主如果加载 ployfill 模块。

$ npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs

在修正 gulpfile.js 文件以下：

const gulp = require("gulp");
const rollup = require("gulp-better-rollup");
const babel = require("rollup-plugin-babel");
const resolve = require("rollup-plugin-node-resolve");
const commonjs = require("rollup-plugin-commonjs");

gulp.task("babel", () => {
  return gulp.src("src/**/*.js")
    .pipe(rollup({
      plugins: [
        commonjs(),
        resolve(),
        babel({
          runtimeHelpers: true
        })
      ]
    },{
      format: "iife"
    }))
    .pipe(gulp.dest("dist"))
})

gulp.task("watch", () => {
    gulp.watch("src/**/*.js", gulp.series("babel"))
})

gulp.task("default", gulp.series(["babel", "watch"]))

运用 sourcemaps 和紧缩

注重紧缩运用 rollup-plugin-uglify 插件，为了提拔打包速率，我们把模块文件放到 src/js/modules 文件夹下，将 gulp.src(“src/js/*.js”) 改成 gulp.src(“src/js/*.js”) 只打包主文件不打包依靠模块。

装置 gulp-sourcemaps 和 rollup-plugin-uglify 插件：

npm install --save-dev gulp-sourcemaps rollup-plugin-uglify

修正 gulpfile.js 文件以下：

const gulp = require("gulp");
const rollup = require("gulp-better-rollup");
const babel = require("rollup-plugin-babel");
const resolve = require("rollup-plugin-node-resolve");
const commonjs = require("rollup-plugin-commonjs");
const uglify = require("rollup-plugin-uglify");
const sourcemaps = require("gulp-sourcemaps");

gulp.task("babel", () => {
  return gulp.src("src/js/*.js")
    .pipe(sourcemaps.init())
    .pipe(rollup({
      plugins: [
        commonjs(),
        resolve(),
        babel({
          runtimeHelpers: true
        }),
        uglify.uglify()
      ]
    },{
      format: "iife"
    }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest("dist/js"))
})

gulp.task("watch", () => {
    gulp.watch("src/**/*.js", gulp.series("babel"))
})

gulp.task("default", gulp.series(["babel", "watch"]))