快速學(xué)習(xí) rollup 打包

1、rollup是什么

JavaScript的ES模塊打包器

從一個入口文件開始，將所有使用到的模塊文件都打包到一個最終的發(fā)布文件中

2、與webpack的差異

定位不同：webpack偏向于應(yīng)用打包；rollup更專注于JavaScript類庫打包

(1)如果你需要代碼拆分(Code Splitting)，或者你有很多靜態(tài)資源需要處理，再或者你構(gòu)建的項目需要引入很多CommonJS模塊的依賴，那么 webpack 是個很不錯的選擇;

(2)如果您的代碼庫是基于 ES2015 模塊的，而且希望你寫的代碼能夠被其他人直接使用，你需要的打包工具可能是 Rollup;

3、rollup的重要特性

(1)它使用ES6的模塊標(biāo)準(zhǔn)，這意味著你可以直接使用import和export而不需要引入babel（當(dāng)然，在現(xiàn)在的項目中，babel可以說是必用的工具了）。

(2)Rollup.js一個重要特性叫做'tree-shaking'，這個特性可以幫助你將無用代碼（即沒有使用到的代碼）從最終的生成文件中刪去。（這個特性是基于ES6模塊的靜態(tài)分析的，也就是說，只有export而沒有import的變量是不會被打包到最終代碼中的）

快速開始

npm install rollup -D

然后在本地創(chuàng)建一個項目：

mkdir -p my-projectcd my-project

其次我們創(chuàng)建一個入口文件，使用 lodash 測試代碼寫個簡單的 demo：

import after from 'lodash/after'
var saves = ['profile', 'settings'];
var done = after(saves.length, function() {  console.log('done saving!');});
done()done()

基本代碼準(zhǔn)備好了之后，我們寫 rollup 的配置文件 (rollup.config.js 在根目錄下)：

export default {    input:'src/main.js',    output:{        file:'dist/bundle.cjs.js',//輸出文件的路徑和名稱        format:'cjs',//五種輸出格式：amd/es6/iife/umd/cjs        name:'bundleName'//當(dāng)format為iife和umd時必須提供，將作為全局變量掛在window下    }}

package.json 添加一條運行的命令：

{ "scripts": {    "build": "rollup --config"  },}

這樣在根目錄下就生成了一個bundle.cjs.js，就是我們想要的打包后的文件。