使用rollup打包庫的一種基本配置
摘要：
Rollup 是一個 JavaScript 模組打包器。它會對符合js的ES6模組的檔案進行打包（非ES6模組如commonjs模組需要外掛先轉化為es6模組）。另外，Rollup會自動的進行tree shaking,有效的降低程式碼體積。然而，Rollup暫還不支援碼拆分和執行時態的動態匯入...
Rollup 是一個 JavaScript 模組打包器。它會對符合js的ES6模組的檔案進行打包（非ES6模組如commonjs模組需要外掛先轉化為es6模組）。另外，Rollup會自動的進行tree shaking,有效的降低程式碼體積。然而，Rollup暫還不支援碼拆分和執行時態的動態匯入，所以更適合用作library的打包器。
每次寫類庫都需要完成大量的基礎配置，babel程式碼，各種格式化工具，提交時的規範等。所以，建立了寫一個類庫時需要的基本的rollup配置，降低後續開發library的成本。 如果不瞭解基本的使用規則，可以檢視Rollup.js官網
關於模板
模板的使用
git clone https://github.com/banyaner/rollup_template.git 複製程式碼
- 修改package.json檔案中的所有'rollup_template'為你的模組的名字
- 模板預設會打包es6和commonjs模組。如果需要打包同時支援多種環境的模組，請看下一節
- 模板使用prettier在git add時自動格式化程式碼
- 模板在git commit時強制使用angular的commit規範使用standard version釋出程式碼使用方法。
-
package.json中main欄位為iife函式，module預設為基於瀏覽器環境進行打包。另外，也會打包出對應的其他型別的模組（node環境和commonjs模組）。可以按照專案需求手動修改。程式碼中通過
process.browser判斷是否為瀏覽器環境，從而在生成程式碼時更好的縮減程式碼。具體的使用可以看文章[譯] 怎樣寫一個能同時用於 Node 和瀏覽器的 JavaScript 包？
關於package.json中的main、module、browser欄位。
Rollup支援打包出ES6、CommonJS、UMD模組.
{
"main": "dist/rollup_template.cjs.js",
"module": "dist/rollup_template.esm.js",
"browser": "rollup_template.umd.js"
}
複製程式碼
Webpack和Rollup都會對ES6模組做靜態優化（tree shaking 和 scope hoisting），所以他們均會有限使用module欄位作為引入資源的入口，如果沒有module才讀取main欄位作為CommonJS的入庫。所以： module 欄位指向ES6的模組；main指向CommonJS模組。 但是如果你寫的模組需要同時支援在Node.js與瀏覽器執行，則需要使用browser來欄位。 browser欄位有兩種使用方式：
- 寫入一個umd檔案地址，如上面的示例。這種將會把所有的node端和瀏覽器端的程式碼都打包進去。（也就意味著如果你的專案只在瀏覽器端執行的話，程式碼裡也可能還會有冗餘的node端程式碼）。注意：使用這種方式後，打包工具會忽略module欄位，從而無法進行靜態優化 。
- 如果你只需要部分檔案做替換，可以使用物件。但前面提到的文章已經說明了這種方式的不友好，所以我們模板中採用了rollup-plugin-replace 來自動的實現檔案的分別打包瀏覽器和node環境程式碼。也就不需要使用browser欄位了.