而目前來看，主要可用的模塊打包工具有這么幾個(gè)：

Browserify

Webpack

Rollup.js

本來我還想講一下 FIS3 的，結(jié)果去看了一下，人家竟然還沒原生的支持 ES6 Modules，而且 fis3-hook-commonjs 插件也幾萬年沒更新了，所以還是算了吧。至于 SystemJS 這類動(dòng)態(tài)模塊加載器本文也不會(huì)涉及，就像我上面說的一樣，在目前這個(gè)時(shí)間點(diǎn)上還是先用模塊打包工具比較好。

下面分別介紹這幾個(gè)工具以及如何使用它們配合 Babel 實(shí)現(xiàn) ES6 模塊轉(zhuǎn)譯。

Browserify 這個(gè)工具也是有些年頭了，它通過打包所有的依賴來讓你能夠在瀏覽器中使用 CommonJS 的語法來 require("modules")，這樣你就可以像在 Node.js 中一樣在瀏覽器中使用 npm 包了，可以爽到。而且我也很喜歡 Browserify 這個(gè) LOGO

既然 Babel 會(huì)把我們的 ES6 Modules 語法轉(zhuǎn)換成 ES5 + CommonJS 規(guī)范的模塊語法，那我們就可以直接用 Browserify 來解析 Babel 的轉(zhuǎn)譯生成物，然后把所有的依賴給打包成一個(gè)文件，豈不是美滋滋。

不過除了 Babel 和 Browserify 這倆工具外，我們還需要一個(gè)叫做 babelify 的東西……好吧好吧，這是最后一個(gè)了，真的。

那么，babelify 是拿來干嘛的呢？因?yàn)?Browserify 只看得懂 CommonJS 的模塊代碼，所以我們得把 ES6 模塊代碼轉(zhuǎn)換成 CommonJS 規(guī)范的，再拿給 Browserify 去看：這一步就是 Babel 要干的事情了。但是 Browserify 人家是個(gè)模塊打包工具啊，它是要去分析 AST（抽象語法樹），把那些 reuqire() 的依賴文件給找出來再幫你打包的，你總不能把所有的源文件都給 Babel 轉(zhuǎn)譯了再交給 Browserify 吧？那太蠢了，我的朋友。

babelify (Browserify transform for Babel) 要做的事情，就是在所有 ES6 文件拿給 Browserify 看之前，先把它用 Babel 給轉(zhuǎn)譯一下（browserify().transform），這樣 Browserify 就可以直接看得懂并打包依賴，避免了要用 Babel 先轉(zhuǎn)譯一萬個(gè)文件的尷尬局面。

好吧，那我們要怎樣把這些工具搗鼓成一個(gè)完整的工具鏈呢？下面就是喜聞樂見的依賴包安裝環(huán)節(jié)：

# 我用的 yarn，你用 npm 也差不多
# gulp 也可以全局安裝，方便一點(diǎn)
# babel-preset 記得選適合自己的
# 最后那倆是用來配合 gulp stream 的
$ yarn add --dev babel-cli babel-preset-env babelify browserify gulp vinyl-buffer vinyl-source-stream

這里我們用 Gulp 作為任務(wù)管理工具來實(shí)現(xiàn)自動(dòng)化（什么，都 7012 年了你還不知道 Gulp？那為什么不去問問神奇海螺呢？），gulpfile.js 內(nèi)容如下：

var gulp       = require("gulp"),
    browserify = require("browserify"),
    babelify   = require("babelify"),
    source     = require("vinyl-source-stream"),
    buffer     = require("vinyl-buffer");

gulp.task("build", function () {
    return browserify(["./src/index.js"])
        .transform(babelify)
        .bundle()
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("dist"))
        .pipe(buffer());
});

相信諸位都能看得懂吧，browserify() 第一個(gè)參數(shù)是入口文件，可以是數(shù)組或者其他亂七八糟的，具體參數(shù)說明請(qǐng)自行參照 Browserify 文檔。而且記得在根目錄下創(chuàng)建 .babelrc 文件指定轉(zhuǎn)譯的 preset，或者在 gulpfile.js 中配置也可以，這里就不再贅述。

最后運(yùn)行 gulp build，就可以生成能直接在瀏覽器中運(yùn)行的打包文件了。

?  browserify $ gulp build
[12:12:01] Using gulpfile E:wwwrootes6-module-testrowserifygulpfile.js
[12:12:01] Starting "build"...
[12:12:01] Finished "build" after 720 ms

我記得這玩意最開始出來的時(shí)候號(hào)稱為「下一代的模塊打包工具」，并且自帶了可大大減小打包體積的 tree-shaking 技術(shù)（DCE 無用代碼移除的一種，運(yùn)用了 ES6 靜態(tài)分析語法樹的特性，只打包那些用到了的代碼），在當(dāng)時(shí)很新鮮。

但是現(xiàn)在 Webpack2+ 已經(jīng)支持了 Tree Shaking 的情況下，我們又有什么特別的理由去使用 Rollup.js 呢？不過畢竟也是一種可行的方法，這里也提一提：

# 我也不知道為啥 Rollup.js 要依賴這個(gè) external-helpers
$ yarn add --dev rollup rollup-plugin-babel babel-preset-env babel-plugin-external-helpers

然后修改根目錄下的 rollup.config.js：

import babel from "rollup-plugin-babel";

export default {
  entry: "src/index.js",
  format: "esm",
  plugins: [
    babel({
      exclude: "node_modules/**"
    })
  ],
  dest: "dist/bundle.js"
};

還要修改 .babelrc 文件，把 Babel 轉(zhuǎn)換 ES6 模塊到 CommonJS 模塊的轉(zhuǎn)換給關(guān)掉，不然會(huì)導(dǎo)致 Rollup.js 處理不來：

{
  "presets": [
    ["env", {
      "modules": false
    }]
  ],
  "plugins": [
    "external-helpers"
  ]
}

然后在根目錄下運(yùn)行 rollup -c 即可打包依賴，也可以配合 Gulp 來使用，官方文檔里就有，這里就不贅述了。可以看到，Tree Shaking 的效果還是很顯著的，經(jīng)測試，未使用的代碼確實(shí)不會(huì)被打包進(jìn)去，比起上面幾個(gè)工具生成的結(jié)果要清爽多了：

對(duì)，Webpack，就是那個(gè)喪心病狂想要把啥玩意都給模塊化的模塊打包工具。既然人家已經(jīng)到了 3.0.0 版本了，所以下面的都是基于 Webpack3 的。什么？現(xiàn)在還有搞前端的不知道 Webpack？神奇海螺以下略。

喜聞樂見的依賴安裝環(huán)節(jié)：

# webpack 也可以全局安裝，方便一些
$ yarn add --dev babel-loader babel-core babel-preset-env webpack

然后配置 webpack.config.js：

var path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["env"]
          }
        }
      }
    ]
  }
};

差不多就是這么個(gè)配置，babel-loader 的其他 options 請(qǐng)參照文檔，而且這個(gè)配置文件的括號(hào)嵌套也是說不出話，ZTMJLWC。

然后運(yùn)行 webpack：

?  webpack $ webpack
Hash: 5c326572cf1440dbdf64
Version: webpack 3.0.0
Time: 1194ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.86 kB       0  [emitted]  main
   [0] ./src/index.js 106 bytes {0} [built]
   [1] ./src/bullshit.js 178 bytes {0} [built]

情況呢就是這么個(gè)情況：

Tips: 關(guān)于 Webpack 的 Tree Shaking
Webpack 現(xiàn)在是自帶 Tree-Shaking 的，不過需要你把 Babel 默認(rèn)的轉(zhuǎn)換 ES6 模塊至 CommonJS 格式給關(guān)掉，就像上面 Rollup.js 那樣在 .babelrc 中添加個(gè) "modules": false。原因的話上面也提到過，tree-shaking 是基于 ES6 模塊的靜態(tài)語法分析的，如果交給 Webpack 的是已經(jīng)被 Babel 轉(zhuǎn)換成 CommonJS 的代碼的話那就沒戲了。
而且 Webpack 自帶的 tree-shaking 只是把沒用到的模塊從 export 中去掉而已，之后還要再接一個(gè) UglifyJS 之類的工具把冗余代碼干掉才能達(dá)到 Rollup.js 那樣的效果。

Webpack 也可以配合 Gulp 工作流讓開發(fā)更嗨皮，有興趣的可自行研究。目前來看，這三種方案中，我本人更傾向于使用 Webpack，不知道諸君會(huì)選用什么呢？

前幾天我在搗鼓 printempw/blessing-skin-server 那坨 shi 一樣 JavaScript 代碼的模塊化的時(shí)候，打算試著使用一下 ES6 標(biāo)準(zhǔn)中的模塊化方案，并找了 Google 大老師問 ES6 模塊轉(zhuǎn)譯打包相關(guān)的資源，找了半天，幾乎沒有什么像樣的中文資源。全是講 ES6 模塊是啥、有多好、為什么要用之類的，沒幾個(gè)是講到底該怎么在生產(chǎn)環(huán)境中使用的（也有可能是我搜索姿勢不對(duì)），說不出話。遂撰此文，希望能幫到后來人。

且本人水平有限，如果文中有什么錯(cuò)誤，歡迎在下方評(píng)論區(qū)批評(píng)指出。

Getting import/export working ES6 style using Browserify + Babelify + Gulp = -5hrs of life

rollup.js ? guide

使用 webpack 2 tree-shaking 機(jī)制時(shí)需要注意的細(xì)節(jié)

webpack+babel 加載 es6 模塊

Documentation - webpack

如何評(píng)價(jià) Webpack 2 新引入的 Tree-shaking 代碼優(yōu)化技術(shù)？