Rollup處理並打包JS文件項目實例

關於Rollup

rollup是一款用來es6模塊打包代碼的構建工具(支持css和js打包)。當咱們使用ES6模塊編寫應用或者庫時，它能夠打包成一個單獨文件提供瀏覽器和Node.js來使用。 它的優勢有以下：

1. 能組合咱們的腳本文件。
2. 移除未使用的代碼(僅僅使用ES6語法中)。
3. 在瀏覽器中支持使用 Node modules。
4. 壓縮文件代碼使文件大小盡量最小化。

Rollup最主要的優勢是它是基於ES2015模塊的，相比於webpack或Browserify所使用的CommonJS模塊更加有效率，由於Rollup使用一種叫作tree-shaking的特性來移除模塊中未使用的代碼，這也就是說當咱們引用一個庫的時候，咱們只用到一個庫的某一段的代碼的時候，它不會把全部的代碼打包進來，而僅僅打包使用到的代碼(webpack2.0+貌似也引入了tree-shaking)。

注意：Rollup只會在ES6模塊中支持tree-shaking特性。目前按照CommonJS模塊編寫的jquery不能被支持tree-shaking。

Rollup的應用場景

如今目前流行的打包有 gulp 和 webpack，那麼與前面兩個對比，我以爲rollup更適合打包js庫，可是對於打包一個項目的整個應用的話，我到以爲webpack更適合，好比打包一些圖片，字體等資源文件的時候，webpack很適合。

本項目的使用方法

項目地址：GitHub

經過GitHub下載項目文件，在命令行工具定位到項目根目錄，而後輸入 npm install 安裝模塊，在輸入下面其中一個命令：

一、在命令行中輸入如下命令，便可監聽文件變化並打包文件

npm run dev

二、在命令行中輸入如下命令，便可完成打包

npm run build