摘要：教程如何使用打包通過(guò)這個(gè)系列教程一步一步學(xué)習(xí)如何使用更小更快的取代和打包文件。安裝并且創(chuàng)建配置文件。提示是告訴我們實(shí)際需要哪些插件的集合。通過(guò)下面的命令安裝兩個(gè)插件更新然后，引入插件并添加進(jìn)配置注意屬性是為了幫助模塊遷移到的一部分。

通過(guò)這個(gè)系列教程一步一步學(xué)習(xí)如何使用更小更快的Rollup取代webpack和Browserify打包JavaScript文件。

這周，我們要使用Rollup構(gòu)建我們的第一個(gè)項(xiàng)目，Rollup是一個(gè)打包JavaScript(和樣式，不過(guò)下周才會(huì)做)的構(gòu)建工具。

通過(guò)這個(gè)教程，我們的Rollup將能夠：

合并scripts代碼，

刪除多余代碼，

編譯成對(duì)舊瀏覽器友好的代碼，

支持在瀏覽器中使用Node模塊，

能使用環(huán)境變量，

盡可能的壓縮，減少文件大小。

至少懂一點(diǎn)JavaScript的話將會(huì)更好理解。

對(duì)ES2015 modules有基本了解，不過(guò)不了解也無(wú)妨。

在你的設(shè)備上要有npm。(還沒(méi)有？在這下載Node.js)

用他們自己的話說(shuō)：

Rollup是下一代JavaScript模塊打包工具。開(kāi)發(fā)者可以在你的應(yīng)用或庫(kù)中使用ES2015模塊，然后高效地將它們打包成一個(gè)單一文件用于瀏覽器和Node.js使用。

和Browserify和webpack很像。

你也可以稱Rollup是一個(gè)構(gòu)建工具，可以和像Grunt和Gulp等一起配置使用。但是，需要注意的一點(diǎn)是當(dāng)你使用Grunt和Gulp來(lái)處理像打包JavaScript這樣的任務(wù)時(shí)，這些工具的底層還是使用了像Rollup，Browserify或webpack這些東西。

Rollup最令人激動(dòng)的地方，就是能讓打包文件體積很小。這么說(shuō)很難理解，更詳細(xì)的解釋：相比其他JavaScript打包工具，Rollup總能打出更小，更快的包。

因?yàn)镽ollup基于ES2015模塊，比webpack和Browserify使用的CommonJS模塊機(jī)制更高效。這也讓Rollup從模塊中刪除無(wú)用的代碼，即tree-shaking變得更容易。

當(dāng)我們引入擁有大量函數(shù)和方法的三方工具或者框架時(shí)tree-shaking會(huì)變得很重要。想想lodash或者jQuery，如果我們只使用一個(gè)或者兩個(gè)方法，就會(huì)因?yàn)榧虞d其余內(nèi)容而產(chǎn)生大量無(wú)用的開(kāi)銷。

Browserify和webpack就會(huì)包含大量無(wú)用的代碼。但是Rollup不會(huì) - 它只會(huì)包括我們真正用到的東西。

更新 (2016-08-22): 澄清一下，Rollup只能對(duì)ES模塊上進(jìn)行tree-shaking。CommonJS模塊 - 像lodash和jQuery那樣寫的模塊不能進(jìn)行tree-shaking。然而，tree-shaking不是Rollup在速度/性能上唯一的優(yōu)勢(shì)?？梢钥碦ich Harris的解釋和Nolan Lawson的補(bǔ)充了解更多。

還有一個(gè)大新聞。

注意: 由于Rollup很高效，webpack 2 也將支持tree-shaking。

為了展示Rollup如何使用，讓我們通過(guò)構(gòu)建一個(gè)簡(jiǎn)單的項(xiàng)目來(lái)走一遍使用Rollup打包JavaScript的過(guò)程。

為了開(kāi)始工作，我們需要一些用來(lái)處理的代碼。這個(gè)教程里，我們將用一個(gè)小應(yīng)用，可從GitHub獲取。

目錄結(jié)構(gòu)如下：

learn-rollup/
├── src/
│   ├── scripts/
│   │   ├── modules/
│   │   │   ├── mod1.js
│   │   │   └── mod2.js
│   │   └── main.js
│   └── styles/
│       └── main.css
└── package.json

你可以在終端執(zhí)行下面的命令下載這個(gè)應(yīng)用，我們將在這個(gè)教程中使用它。

# Move to the folder where you keep your dev projects.
cd /path/to/your/projects

# Clone the starter branch of the app from GitHub.
git clone -b step-0 --single-branch https://github.com/jlengstorf/learn-rollup.git

# The files are downloaded to /path/to/your/projects/learn-rollup/

第一步，執(zhí)行下面的命令安裝Rollup：

npm install --save-dev rollup

然后，在learn-rollup文件夾下新建rollup.config.js。在文件中添加如下內(nèi)容。

export default {
  entry: "src/scripts/main.js",
  dest: "build/js/main.min.js",
  format: "iife",
  sourceMap: "inline",
};

說(shuō)說(shuō)每個(gè)配置項(xiàng)實(shí)際上做了什么：

entry — 希望Rollup處理的文件路徑。大多數(shù)應(yīng)用中，它將是入口文件，初始化所有東西并啟動(dòng)應(yīng)用。

dest — 編譯完的文件需要被存放的路徑。

format — Rollup支持多種輸出格式。因?yàn)槲覀兪且跒g覽器中使用，需要使用立即執(zhí)行函數(shù)表達(dá)式(IIFE)[注1]

sourceMap — 調(diào)試時(shí)sourcemap是非常有用的。這個(gè)配置項(xiàng)會(huì)在生成文件中添加一個(gè)sourcemap，讓開(kāi)發(fā)更方便。

NOTE: 對(duì)于其他的format選項(xiàng)以及你為什么需要他們，看Rollup’s wiki。

當(dāng)創(chuàng)建好配置文件后，在終端執(zhí)行下面的命令測(cè)試每項(xiàng)配置是否工作：

./node_modules/.bin/rollup -c

在你的項(xiàng)目下會(huì)出現(xiàn)一個(gè)build目錄，包含js子目錄，子目錄中包含生成的main.min.js文件。

在瀏覽器中打開(kāi)build/index.html可以看到打包文件正確生成了。

完成第一步后我們的示例項(xiàng)目的狀態(tài)。

注意：現(xiàn)在，只有現(xiàn)代瀏覽器下不會(huì)報(bào)錯(cuò)。為了能夠在不支持ES2015/ES6的老瀏覽器中運(yùn)行，我們需要添加一些插件。

事實(shí)上Rollup強(qiáng)大是因?yàn)樗褂昧恕皌ree-shaking”，可以在你引入的模塊中刪除沒(méi)有用的代碼。舉個(gè)例子，在src/scripts/modules/mod1.js中的sayGoodbyeTo()函數(shù)在我們的應(yīng)用中并沒(méi)有使用 - 而且因?yàn)樗鼜牟粫?huì)被使用，Rollup不會(huì)將它打包到bundle中：

(function () {
"use strict";

/**
 * Says hello.
 * @param  {String} name a name
 * @return {String}      a greeting for `name`
 */
function sayHelloTo( name ) {
  const toSay = `Hello, ${name}!`;

  return toSay;
}

/**
 * Adds all the values in an array.
 * @param  {Array} arr an array of numbers
 * @return {Number}    the sum of all the array values
 */
const addArray = arr => {
  const result = arr.reduce((a, b) => a + b, 0);

  return result;
};

// Import a couple modules for testing.
// Run some functions from our imported modules.
const result1 = sayHelloTo("Jason");
const result2 = addArray([1, 2, 3, 4]);

// Print the results on the page.
const printTarget = document.getElementsByClassName("debug__output")[0];

printTarget.innerText = `sayHelloTo("Jason") => ${result1}

`
printTarget.innerText += `addArray([1, 2, 3, 4]) => ${result2}`;

}());
//# sourceMappingURL=data:application/json;charset=utf-8;base64,...

其他的構(gòu)建工具則不是這樣的，所以如果我們引入了一個(gè)像lodash這樣一個(gè)很大的庫(kù)而只是使用其中一兩個(gè)函數(shù)時(shí)，我們的包文件會(huì)變得非常大。

比如使用webpack的話，sayGoodbyeTo()也會(huì)打包進(jìn)去，產(chǎn)生的打包文件比Rollup生成的大了兩倍多。

現(xiàn)在我們已經(jīng)得到能在現(xiàn)代瀏覽器中運(yùn)行的包文件了，但是在一些舊版本瀏覽器中就會(huì)崩潰 - 這并不理想。

幸運(yùn)的是，Babel已發(fā)布了。這個(gè)項(xiàng)目編譯JavaScript新特性(ES6/ES2015等等)到ES5, 差不多在今天的任何瀏覽器上都能運(yùn)行。

如果你還沒(méi)用過(guò)Babel，那么你的開(kāi)發(fā)生涯要永遠(yuǎn)地改變了。使用JavaScript的新方法讓語(yǔ)言更簡(jiǎn)單，更簡(jiǎn)潔而且整體上更友好。

那么讓我們?yōu)镽ollup加上這個(gè)過(guò)程，就不用擔(dān)心上面的問(wèn)題了。

首先，我們需要安裝Babel Rollup plugin和適當(dāng)?shù)腂abel preset。

# Install Rollup’s Babel plugin.
npm install --save-dev rollup-plugin-babel

# Install the Babel preset for transpiling ES2015 using Rollup.
npm install --save-dev babel-preset-es2015-rollup

提示: Babel preset是告訴Babel我們實(shí)際需要哪些babel插件的集合。

然后，在項(xiàng)目根目錄(learn-rollup/)下創(chuàng)建一個(gè).babelrc文件。在文件中添加下面的JSON：

{
  "presets": ["es2015-rollup"],
}

它會(huì)告訴Babel在轉(zhuǎn)換時(shí)哪些preset將會(huì)用到。

為了讓它能真正工作，我們需要更新rollup.config.js。

在文件中，importBabel插件，將它添加到新配置屬性plugins中，這個(gè)屬性接收一個(gè)插件組成的數(shù)組。

// Rollup plugins
import babel from "rollup-plugin-babel";

export default {
  entry: "src/scripts/main.js",
  dest: "build/js/main.min.js",
  format: "iife",
  sourceMap: "inline",
  plugins: [
    babel({
      exclude: "node_modules/**",
    }),
  ],
};

為避免編譯三方腳本，通過(guò)設(shè)置exclude屬性忽略node_modules目錄。

全部都安裝并配置好后，重新打包一下：

./node_modules/.bin/rollup -c

再看一下輸出結(jié)果，大部分是一樣的。但是有一些地方不一樣：比如，addArray()這個(gè)函數(shù)：

var addArray = function addArray(arr) {
  var result = arr.reduce(function (a, b) {
    return a + b;
  }, 0);

  return result;
};

Babel是如何將箭頭函數(shù)(arr.reduce((a, b) => a + b, 0))轉(zhuǎn)換成一個(gè)普通函數(shù)的呢？

這就是編譯的意義：結(jié)果是相同的，但是現(xiàn)在的代碼可以向后支持到IE9.

注意: Babel也提供了babel-polyfill,使得像Array.prototype.reduce()這些方法在IE8甚至更早的瀏覽器也能使用。

在你的項(xiàng)目中使用linter是個(gè)好主意，因?yàn)樗鼜?qiáng)制統(tǒng)一了代碼風(fēng)格并且能幫你發(fā)現(xiàn)很難找到的bug，比如花括號(hào)或者圓括號(hào)。

在這個(gè)項(xiàng)目中，我們將使用ESLint。

為使用ESLint，我們需要安裝ESLint Rollup plugin：

npm install --save-dev rollup-plugin-eslint

為確保我們只得到我們想檢測(cè)的錯(cuò)誤，首先要配置ESLint。很幸運(yùn)，我們可以通過(guò)執(zhí)行下面的命令自動(dòng)生成大多數(shù)配置：

$ ./node_modules/.bin/eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? No
? Do you use JSX? No
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON
Successfully created .eslintrc.json file in /Users/jlengstorf/dev/code.lengstorf.com/projects/learn-rollup

如果你按上面展示的那樣回答問(wèn)題，你將在生成的.eslintrc.json中得到下面的內(nèi)容：

{
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "sourceType": "module"
  },
  "rules": {
    "indent": [
      "error",
      4
    ],
    "linebreak-style": [
      "error",
      "unix"
    ],
    "quotes": [
      "error",
      "single"
    ],
    "semi": [
      "error",
      "always"
    ]
  }
}

然而我們需要改動(dòng)兩個(gè)地方來(lái)避免項(xiàng)目報(bào)錯(cuò)。

使用2空格代替4空格。

后面會(huì)使用到ENV這個(gè)全局變量，因此要把它加入白名單中。

在.eslintrc.json進(jìn)行如下修改 — 添加globals屬性并修改indent屬性：

{
  "env": {
    "browser": true,
    "es6": true
  },
  "globals": {
    "ENV": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "sourceType": "module"
  },
  "rules": {
    "indent": [
      "error",
      2
    ],
    "linebreak-style": [
      "error",
      "unix"
    ],
    "quotes": [
      "error",
      "single"
    ],
    "semi": [
      "error",
      "always"
    ]
  }
}

然后，引入ESLint插件并添加到Rollup配置中：

// Rollup plugins
import babel from "rollup-plugin-babel";
import eslint from "rollup-plugin-eslint";

export default {
  entry: "src/scripts/main.js",
  dest: "build/js/main.min.js",
  format: "iife",
  sourceMap: "inline",
  plugins: [
    babel({
      exclude: "node_modules/**",
    }),
    eslint({
      exclude: [
        "src/styles/**",
      ]
    }),
  ],
};

第一次，當(dāng)執(zhí)行./node_modules/.bin/rollup -c時(shí)，似乎什么都沒(méi)發(fā)生。因?yàn)檫@表示應(yīng)用的代碼通過(guò)了linter，沒(méi)有問(wèn)題。

但是如果我們制造一個(gè)錯(cuò)誤 - 比如刪除一個(gè)分號(hào) - 我們會(huì)看到ESLint是如何提示的：

$ ./node_modules/.bin/rollup -c

/Users/jlengstorf/dev/code.lengstorf.com/projects/learn-rollup/src/scripts/main.js
  12:64  error  Missing semicolon  semi

? 1 problem (1 error, 0 warnings)

一些包含潛在風(fēng)險(xiǎn)和解釋神秘bug的東西立刻出現(xiàn)了，包括出現(xiàn)問(wèn)題的文件，行和列。

但是它不能排除我們調(diào)試時(shí)的所有問(wèn)題，很多由于拼寫錯(cuò)誤和疏漏產(chǎn)生的bug還是要自己花時(shí)間去解決。

如果你的依賴中有任何使用Node風(fēng)格的模塊這個(gè)插件就很重要。如果沒(méi)有它，你會(huì)得到關(guān)于require的錯(cuò)誤。

在這個(gè)小項(xiàng)目中不引用三方模塊很正常，但實(shí)際項(xiàng)目中不會(huì)如此。所以為了讓我們的Rollup配置變得真正可用，需要保證在我們的代碼中也能引用是三方模塊。

舉個(gè)簡(jiǎn)單的例子，我們將使用debug包添加一個(gè)簡(jiǎn)單的日志打印器到項(xiàng)目中。先安裝它：

npm install --save debug

注意：因?yàn)樗菚?huì)在主程序中引用的，應(yīng)該使用--save參數(shù)，可以避免在生產(chǎn)環(huán)境下出現(xiàn)錯(cuò)誤，因?yàn)?b>devDependencies在生產(chǎn)環(huán)境下不會(huì)被安裝。

然后在src/scripts/main.js中添加一個(gè)簡(jiǎn)單的日志：

// Import a couple modules for testing.
import { sayHelloTo } from "./modules/mod1";
import addArray from "./modules/mod2";

// Import a logger for easier debugging.
import debug from "debug";
const log = debug("app:log");

// Enable the logger.
debug.enable("*");
log("Logging is enabled!");

// Run some functions from our imported modules.
const result1 = sayHelloTo("Jason");
const result2 = addArray([1, 2, 3, 4]);

// Print the results on the page.
const printTarget = document.getElementsByClassName("debug__output")[0];

printTarget.innerText = `sayHelloTo("Jason") => ${result1}

`;
printTarget.innerText += `addArray([1, 2, 3, 4]) => ${result2}`;

到此一切都很好，但是當(dāng)運(yùn)行rollup時(shí)會(huì)得到一個(gè)警告：

$ ./node_modules/.bin/rollup -c
Treating "debug" as external dependency
No name was provided for external module "debug" in options.globals – guessing "debug"

而且如果在查看index.html，會(huì)發(fā)現(xiàn)一個(gè)ReferenceError拋出了：

默認(rèn)情況下，三方的Node模塊無(wú)法在Rollup中正確加載。

哦，真糟糕。完全無(wú)法運(yùn)行。

因?yàn)镹ode模塊使用CommonJS，無(wú)法與Rollup直接兼容。為解決這個(gè)問(wèn)題，需要添加一組處理Node模塊和CommonJS模塊的插件。

圍繞這個(gè)問(wèn)題，我們將在Rollup中新增兩個(gè)插件：

rollup-plugin-node-resolve，運(yùn)行加載node_modules中的三方模塊。

rollup-plugin-commonjs，將CommonJS模塊轉(zhuǎn)換成ES6，防止他們?cè)赗ollup中失效。

通過(guò)下面的命令安裝兩個(gè)插件：

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

然后，引入插件并添加進(jìn)Rollup配置：

// Rollup plugins
import babel from "rollup-plugin-babel";
import eslint from "rollup-plugin-eslint";
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";

export default {
  entry: "src/scripts/main.js",
  dest: "build/js/main.min.js",
  format: "iife",
  sourceMap: "inline",
  plugins: [
    resolve({
      jsnext: true,
      main: true,
      browser: true,
    }),
    commonjs(),
    eslint({
      exclude: [
        "src/styles/**",
      ]
    }),
    babel({
      exclude: "node_modules/**",
    }),
  ],
};

注意: jsnext屬性是為了幫助Node模塊遷移到ES2015的一部分。main和browser 屬性幫助插件決定哪個(gè)文件應(yīng)該被bundle文件使用。

執(zhí)行./node_modules/.bin/rollup -c重新打包，然后再檢查瀏覽器輸出：

成功了！日志現(xiàn)在打印出來(lái)了。

環(huán)境變量使開(kāi)發(fā)流程更強(qiáng)大，讓我們有能力做一些事情，比如打開(kāi)或關(guān)閉日志，注入僅在開(kāi)發(fā)環(huán)境使用的腳本等等。

那么讓Rollup支持這些功能吧。

讓我們通過(guò)一個(gè)環(huán)境變量控制日志腳本，讓日志腳本只能在非生產(chǎn)環(huán)境下使用。在src/scripts/main.js中修改log()的初始化方式。

// Import a logger for easier debugging.
import debug from "debug";
const log = debug("app:log");

// The logger should only be disabled if we’re not in production.
if (ENV !== "production") {

  // Enable the logger.
  debug.enable("*");
  log("Logging is enabled!");
} else {
  debug.disable();
}

然而，重新打包(./node_modules/.bin/rollup -c)后檢查瀏覽器，會(huì)看到一個(gè)ENV的ReferenceError。

不必驚訝，因?yàn)槲覀儧](méi)有在任何地方定義它。如果我們嘗試ENV=production ./node_modules/.bin/rollup -c，還是不會(huì)成功。因?yàn)槟菢釉O(shè)置的環(huán)境變量只是在Rollup中可用，不是在Rollup打包的bundle中可用。

我們需要使用一個(gè)插件將環(huán)境變量傳入bundle。

安裝rollup-plugin-replace插件，它本質(zhì)上只是做了查找-替換的工作。它能做很多事情，但現(xiàn)在我們只需要讓它簡(jiǎn)單地找到出現(xiàn)的環(huán)境變量并將其替換成實(shí)際的值。（比如，所有在bundle出現(xiàn)的ENV變量都會(huì)被替換成"production" ）。

npm install --save-dev rollup-plugin-replace

在rollup.config.js中引入插件并且添加到插件列表中。

配置非常簡(jiǎn)單：只需添加一個(gè)鍵值對(duì)的列表，key是將被替換的字符串，value是應(yīng)該被替換成的值。

// Rollup plugins
import babel from "rollup-plugin-babel";
import eslint from "rollup-plugin-eslint";
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import replace from "rollup-plugin-replace";

export default {
  entry: "src/scripts/main.js",
  dest: "build/js/main.min.js",
  format: "iife",
  sourceMap: "inline",
  plugins: [
    resolve({
      jsnext: true,
      main: true,
      browser: true,
    }),
    commonjs(),
    eslint({
      exclude: [
        "src/styles/**",
      ]
    }),
    babel({
      exclude: "node_modules/**",
    }),
    replace({
      exclude: "node_modules/**",
      ENV: JSON.stringify(process.env.NODE_ENV || "development"),
    }),
  ],
};

在我們的配置中，將找打所有出現(xiàn)的ENV并且替換成process.env.NODE_ENV - 在Node應(yīng)用中最普遍的設(shè)置環(huán)境變量的方法 - 或者 "development"中的一個(gè)。使用JSON.stringify()確保值被雙引號(hào)包裹，如果ENV沒(méi)有的話。

為了確保不會(huì)和三方代碼造成問(wèn)題，同樣設(shè)置exclude屬性來(lái)忽略node_modules目錄和其中的全部包。(幸虧@wesleycoder先在這上面踩坑了。)

首先，重新打包然后在瀏覽器中檢查?？刂婆_(tái)日志會(huì)顯示，就像之前一樣。很棒 - 這意味著我們的默認(rèn)值生效了。

為了展示新引入的能力，我們?cè)?b>production模式下運(yùn)行命令：

NODE_ENV=production ./node_modules/.bin/rollup -c

注意: 在Windows上，使用SET NODE_ENV=production ./node_modules/.bin/rollup -c防止在設(shè)置環(huán)境變量時(shí)報(bào)錯(cuò)。

當(dāng)刷新瀏覽器后，控制臺(tái)沒(méi)有任何日志打出了：

不改變?nèi)魏未a的情況下，使用一個(gè)環(huán)境變量禁用了日志插件。

這個(gè)教程中最后一步是添加UglifyJS來(lái)減小和壓縮bundle文件?？梢酝ㄟ^(guò)移除注釋，縮短變量名和其他壓縮換行等方式大幅度減少bundle的大小 - 會(huì)讓文件的可讀性變差，但提高了網(wǎng)絡(luò)間傳輸?shù)男省?/p> 安裝插件

我們將使用UglifyJS壓縮bundle，通過(guò)rollup-plugin-uglify插件。

通過(guò)下面命令安裝：

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

然后添加Uglify到Rollup配置。為了開(kāi)發(fā)環(huán)境下可讀性更好，設(shè)置代碼丑化僅在生產(chǎn)環(huán)境下使用：

// Rollup plugins
import babel from "rollup-plugin-babel";
import eslint from "rollup-plugin-eslint";
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import replace from "rollup-plugin-replace";
import uglify from "rollup-plugin-uglify";

export default {
  entry: "src/scripts/main.js",
  dest: "build/js/main.min.js",
  format: "iife",
  sourceMap: "inline",
  plugins: [
    resolve({
      jsnext: true,
      main: true,
      browser: true,
    }),
    commonjs(),
    eslint({
      exclude: [
        "src/styles/**",
      ]
    }),
    babel({
      exclude: "node_modules/**",
    }),
    replace({
      ENV: JSON.stringify(process.env.NODE_ENV || "development"),
    }),
    (process.env.NODE_ENV === "production" && uglify()),
  ],
};

我們使用了短路運(yùn)算，很常用(雖然也有爭(zhēng)議)的條件性設(shè)置值的方法。[注4]

在我們的例子中，只有在NODE_ENV是"production"時(shí)才會(huì)加載uglify()。

保存配置文件，讓我們?cè)谏森h(huán)境下運(yùn)行Rollup：

NODE_ENV=production ./node_modules/.bin/rollup -c

注意: 在Windows上，使用SET NODE_ENV=production ./node_modules/.bin/rollup -c防止在設(shè)置環(huán)境變量時(shí)報(bào)錯(cuò)。

輸出內(nèi)容并不美觀，但是更小了。這有build/js/main.min.js的截屏，看起來(lái)像這樣：

丑化過(guò)的代碼確實(shí)能更高效地傳輸。

之前，我們的bundle大約42KB。使用UglifyJS后，減少到大約29KB - 在沒(méi)做其他優(yōu)化的情況下節(jié)省了超過(guò)30%文件大小。

在這個(gè)系列的下一節(jié)，我們將了解通過(guò)Rollup和PostCSS處理樣式，并且添加live reloading來(lái)實(shí)時(shí)看見(jiàn)我們的修改。

The cost of small modules - 這篇文章讓我開(kāi)始對(duì)Rollup感興趣，因?yàn)樗故玖艘恍㏑ollup相比webpack和Browserify的優(yōu)勢(shì)。

Rollup’s getting started guide

Rollup’s CLI docs

A list of Rollup plugins

注1： 這是一個(gè)非常難理解的概念，所以沒(méi)全理解也不要有壓力。簡(jiǎn)單來(lái)說(shuō)，我們希望我們的代碼在他們自己的作用域中，防止和其它腳本的沖突。IIFE是一個(gè)包括我們的代碼在自身作用域的一個(gè)[閉包]。

注2：It’s important to keep in mind, though, that when we’re dealing with such a small example app it doesn’t take much to double a file size. The comparison at this point is ~3KB vs. ~8KB.

注3：作為曾經(jīng)花數(shù)小時(shí)找bug然后發(fā)現(xiàn)拼錯(cuò)一個(gè)變量名的人，不需要夸大使用linter帶來(lái)的效率提升。

注4：舉個(gè)例子，使用這種方法來(lái)賦默認(rèn)值時(shí)非常常見(jiàn)的。（比如var foo = maybeThisExists || "default";）

這篇文章的代碼放在GitHub上。你可以fork 這個(gè)倉(cāng)庫(kù)進(jìn)行修改或測(cè)試，開(kāi)issue或者報(bào)告bug，或者新建pull request進(jìn)行建議或者修改。

原文鏈接