### 概述
---
Rollup 是一個 JavaScript 模塊打包器，可以將小塊代碼編譯成大塊復雜的代碼，例如 library 或應用程序。Rollup 對代碼模塊使用新的標準化格式，這些標準都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解決方案，如 CommonJS 和 AMD。
### 快速入門指南
使用 `npm install --global rollup` 進行安裝。Rollup 可以通過[命令行接口(command line interface)](https://github.com/rollup/rollup/wiki/Command-Line-Interface)配合可選配置文件(optional configuration file)來調用，或者可以通過 [JavaScript API](https://github.com/rollup/rollup/wiki/JavaScript-API)來調用。運行 `rollup --help` 可以查看可用的選項和參數。[啟動項目模板](https://github.com/rollup/rollup-starter-project)演示了常用的配置選項，并且[用戶指南](http://rollupjs.org/)也提供了更詳盡的說明。
#### 命令
這些命令假設應用程序入口起點的名稱為 main.js，并且你想要所有 import 的依賴(all imports)都編譯到一個名為 bundle.js 的單個文件中。
對于瀏覽器：
```bash
# compile to a <script> containing a self-executing function
$ rollup main.js --format iife --output bundle.js
```
對于 Node.js:
```bash
# compile to a CommonJS module
$ rollup main.js --format cjs --output bundle.js
```
對于瀏覽器和 Node.js:
```bash
# UMD format requires a bundle name
$ rollup main.js --format umd --name "myBundle" --output bundle.js
```
### 為什么
如果你將項目拆分成小的單獨文件中，這樣開發軟件通常會很簡單，因為這通常會消除無法預知的相互影響(remove unexpected interaction)，以及顯著降低了所要解決的問題的復雜度(complexity of the problem)，并且可以在項目最初時，就簡潔地編寫小的項目（[不一定是標準答案](https://medium.com/@Rich_Harris/small-modules-it-s-not-quite-that-simple-3ca532d65de4)）。不幸的是，JavaScript 以往并沒有將此功能作為語言的核心功能。
### Tree Shaking
除了使用 ES6 模塊之外，Rollup 還靜態分析代碼中的 import，并將排除任何未實際使用的代碼。這允許您架構于現有工具和模塊之上，而不會增加額外的依賴或使項目的大小膨脹。
例如，在使用 CommonJS 時，*必須導入(import)完整的工具(tool)或庫(library)對象*。
```js
// 使用 CommonJS 導入(import)完整的 utils 對象
var utils = require( 'utils' );
var query = 'Rollup';
// 使用 utils 對象的 ajax 方法
utils.ajax( 'https://api.example.com?search=' + query ).then( handleResponse );
```
但是在使用 ES6 模塊時，無需導入整個 `utils` 對象，我們可以只導入(import)我們所需的 `ajax` 函數：
```js
// 使用 ES6 import 語句導入(import) ajax 函數
import { ajax } from 'utils';
var query = 'Rollup';
// 調用 ajax 函數
ajax( 'https://api.example.com?search=' + query ).then( handleResponse );
```
因為 Rollup 只引入最基本最精簡代碼，所以可以生成輕量、快速，以及低復雜度的 library 和應用程序。因為這種基于顯式的 `import` 和 `export` 語句的方式，它遠比「在編譯后的輸出代碼中，簡單地運行自動 minifier 檢測未使用的變量」更有效。
ES6 模塊可以使你自由、無縫地使用你最喜愛的 library 中那些最有用獨立函數，而你的項目不必攜帶其他未使用的代碼。ES6 模塊最終還是要由瀏覽器原生實現，但當前 Rollup 可以使你提前體驗。
### 兼容性
#### 導入 CommonJS
Rollup 可以[通過插件](https://github.com/rollup/rollup-plugin-commonjs)導入已存在的 CommonJS 模塊。
#### 發布 ES6 模塊
為了確保你的 ES6 模塊可以直接與「運行在 CommonJS（例如 Node.js 和 webpack）中的工具(tool)」使用，你可以使用 Rollup 編譯為 UMD 或 CommonJS 格式，然后在 `package.json` 文件的 `main` 屬性中指向當前編譯的版本。如果你的 `package.json` 也具有 `module` 字段，像 Rollup 和 [webpack 2](https://webpack.js.org/) 這樣的 ES6 感知工具(ES6-aware tools)將會直接[導入 ES6 模塊版本](https://github.com/rollup/rollup/wiki/pkg.module)。
### 參考鏈接
- step-by-step [tutorial video series](https://code.lengstorf.com/learn-rollup-js/), with accompanying written walkthrough
- miscellaneous issues in the [wiki](https://github.com/rollup/rollup/wiki)
***
> 原文：https://rollupjs.org/#introduction
