Rollup處理並打包JS檔案專案例項

雨霖月寒發表於2018-05-31
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 安裝模組，在輸入下面其中一個命令：

1、在命令列中輸入以下命令，即可監聽檔案變化並打包檔案 

npm run dev

2、在命令列中輸入以下命令，即可完成打包

npm run build

 

相關文章