rollup.js 簡介

• Webpack vs Rollup
• Rollup語法
• Tree-shaking
• Webpack and Rollup: the same but different
• Google Closure Compiler

Webpack vs Rollup

在Webpack已經是霸主地位的構建打包天下，殺出一個Rollup。Vue, Ember, Preact, D3, Three.js, Moment, etc. 一些很有名的js庫，甚至最近React，都使用紛紛使用Rollup來作為打包工具。所以Rollup想必有它的優勢。

Rollup語法

Rollup的語法比Webpack更加簡單，文檔教程比Webpack更加循序漸進，按順序全部看一遍，雖然沒有中文，但英文讀下來基本沒有障礙。有JavaScript-API的使用方法，也有指定配置文件形式的CLI的方法，這裡就只介紹配置文件的用法。

// rollup.config.jsimport resolve from rollup-plugin-node-resolve;import babel from rollup-plugin-babel;import buble from rollup-plugin-buble;export default { // 入口文件 entry: src/main.js, // 指定打包後js的代碼格式 - amd, cjs, es, iife, umd format: cjs, // 使用的插件 plugins: [ buble(), resolve(), babel({ exclude: node_modules/** // only transpile our source code }) ], // 可以同時打包輸出多個格式的js文件 targets: [ { dest: dist/bundle.cjs.js, format: cjs }, { dest: dist/bundle.umd.js, format: umd }, { dest: dist/bundle.es.js, format: es }, ], //也可以是一個 dest: bundle.js};

如果使用balel插件，就需要在src目錄下新建.babelrc文件

// src/.babelrc{ "presets": [ ["latest", { "es2015": { // 指定babel不要把es2015的模塊轉換為commonjs的 "modules": false } }] ], "plugins": ["external-helpers"]}

Tree-shaking

這個概念是Rollup提出來的。

Rollup推薦使用ES2015 Modules來編寫模塊代碼，這樣就可以使用Tree-shaking來對代碼做靜態分析消除無用的代碼，可以查看Rollup網站上的REPL示例，代碼打包前後之前的差異，就會清晰的明白Tree-shaking的作用。

• 沒有使用額外的模塊系統，直接定位import來替換export的模塊
• 去掉了未被使用的代碼

打包前的js代碼

// main.js (entry module)import { cube } from ./maths.js;console.log( cube( 5 ) ); // 125

// ./maths.js// This function isnt used anywhere, so// Rollup excludes it from the bundle...export function square ( x ) { return x * x;}// This function gets includedexport function cube ( x ) { return x * x * x;}

打包後的js代碼

use strict;// This function isnt used anywhere, so// Rollup excludes it from the bundle...// This function gets includedfunction cube ( x ) { return x * x * x;}console.log( cube( 5 ) ); // 125

更多Tree-shaking代碼示例

Rollup之所以能可以用Tree-shaking來消除無用的代碼

主要為以下四個原因（摘自尤雨溪在知乎的回答）：

1. import只能作為模塊頂層的語句出現，不能出現在 function 裡面或是 if 裡面。
2. import 的模塊名只能是字元串常量。
3. 不管 import 的語句出現的位置在哪裡，在模塊初始化的時候所有的 import 都必須已經導入完成。
4. import binding 是 immutable 的，類似 const。比如說你不能 import { a } from 『./a』 然後給 a 賦值個其他什麼東西。

Webpack and Rollup: the same but different

Rollup作者最近的一片文章里分析了Webpack和Rollup的不同之處。總結是說Webpack適合在單頁應用Web App上使用，Rollup適合使用在獨立的js庫上。

Use Webpack for apps, and Rollup for libraries

Webpack核心功能包括Code-splitting（按需載入js）和Static assets（處理各種格式的資源）。

Rollup到目前為止不支持Code-splitting和hot module replacement (熱更新)，它更趨向專註於構建分發類的js庫，也就是說大多只會生成一個js文件來被其他項目依賴，更好的利用ES2015 modules的優勢來縮小和優化代碼。

Rollup在15年時候就已經發布，支持Tree-shaking，當時Webpack還是1.*的版本，沒有使用Tree-shaking，而且每個模塊外還要包一層函數定義，再通過合併進去的 define/require 相互調用，模塊越多，這些包在外層的模塊系統的函數就越多，造成打包後代碼量的增大。

然而Webpack2.* 今年1月份才上線正式的版本，Rollup經過二年左右的發展也取向成熟，所以許多js庫從紛紛使用了Rollup。

Webpack and Rollup: the same but different

Google Closure Compiler

Google開發的一個優化js代碼的工具，能對源碼做更深層次靜態分析，更全面的優化達到高度壓縮源碼的效果，直接看一下的示例，在這不多做介紹。

Google Closure Compiler

參考文章

如何評價 Webpack 2 新引入的 Tree-shaking 代碼優化技術？

使用 Rollup 和 Buble 編譯 JS 庫

微信號：feworld