關於Rollup rollup是一款用來es6模塊打包代碼的構建工具(支持css和js打包)。當我們使用ES6模塊編寫應用或者庫時,它可以打包成一個單獨文件提供瀏覽器和Node.js來使用。 它的優點有如下: 能組合我們的腳本文件。 移除未使用的代碼(僅僅使用ES6語法中)。 ... ...
關於Rollup
rollup是一款用來es6模塊打包代碼的構建工具(支持css和js打包)。當我們使用ES6模塊編寫應用或者庫時,它可以打包成一個單獨文件提供瀏覽器和Node.js來使用。 它的優點有如下:
- 能組合我們的腳本文件。
- 移除未使用的代碼(僅僅使用ES6語法中)。
- 在瀏覽器中支持使用 Node modules。
- 壓縮文件代碼使文件大小儘可能最小化。
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