摘要：地址構(gòu)建基礎(chǔ)的語(yǔ)法轉(zhuǎn)譯環(huán)境首先，安裝工具，命令如下安裝插件，由于需要作為依賴(lài)，因此，還要安裝模塊和和之間的無(wú)縫集成插件安裝核心插件安裝完成后，配置文件和文件，將這兩個(gè)文件放在項(xiàng)目根目錄下。

關(guān)于 Gulp 就不過(guò)多啰嗦了。常用的 js 模塊打包工具主要有 webpack、rollup 和 browserify 三個(gè)，Gulp 構(gòu)建 ES6 開(kāi)發(fā)環(huán)境通常需要借助這三者之一來(lái)合并打包 ES6 模塊代碼。因此，Gulp 構(gòu)建 ES6 開(kāi)發(fā)環(huán)境的方案有很多，例如：webpack-stream、rollup-stream 、browserify等，本文講述使用 gulp-better-rollup 的構(gòu)建過(guò)程。gulp-better-rollup 可以將 rollup 更深入地集成到Gulps管道鏈中。

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

首先，安裝 gulp 工具，命令如下：

$ npm install --save-dev gulp

安裝 gulp-better-rollup 插件，由于 gulp-better-rollup 需要 rollup 作為依賴(lài)，因此，還要安裝 rollup 模塊和 rollup-plugin-babel（rollup 和 babel 之間的無(wú)縫集成插件）：

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

安裝 babel 核心插件:

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

安裝完成后，配置 .babelrc 文件和 gulpfile.js文件，將這兩個(gè)文件放在項(xiàng)目根目錄下。

新建 .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 語(yǔ)法新建 js 文件，然后運(yùn)行 gulp 默認(rèn)任務(wù)，檢查 dist 下的文件是否編譯成功。

經(jīng)過(guò)上面的構(gòu)建過(guò)程，成功將 ES6 語(yǔ)法轉(zhuǎn)譯為 ES5 語(yǔ)法，但也僅僅是轉(zhuǎn)換的語(yǔ)法，新的 api（如：Set、Map、Promise等） 并沒(méi)有被轉(zhuǎn)譯。關(guān)于 ployfill 兼容可以直接在頁(yè)面中引入 ployfill.js 或 ployfill.min.js 文件實(shí)現(xiàn)，這種方式比較簡(jiǎn)單，本文不再贅述，下面講下在構(gòu)建中的實(shí)現(xiàn)方式。

安裝 @babel/plugin-transform-runtime 、@babel/runtime-corejs2 和 core-js@2（注意：core-js的版本要和@babel/runtime的版本對(duì)應(yīng)，如：@babel/runtime-corejs2對(duì)應(yīng)core-js@2）。@babel/plugin-transform-runtime 的作用主要是避免污染全局變量和編譯輸出中的重復(fù)。@babel/runtime（此處指@babel/runtime-corejs2）實(shí)現(xiàn)運(yùn)行時(shí)編譯到您的構(gòu)建中。

$ 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
      }
    ]
  ]
}

同時(shí)修改 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，這兩個(gè)插件主要作用是注入 node_modules 下的基于 commonjs 模塊標(biāo)準(zhǔn)的模塊代碼。在這里的作用主要是加載 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"]))

注意壓縮使用 rollup-plugin-uglify 插件，為了提升打包速度，我們把模塊文件放到 src/js/modules 文件夾下，將 gulp.src("src/js/*.js") 改為 gulp.src("src/js/*.js") 只打包主文件不打包依賴(lài)模塊。

安裝 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"]))