使用rollup打包庫的一種基本配置

midsummer發表於2019-01-26

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
複製程式碼
  1. 修改package.json檔案中的所有'rollup_template'為你的模組的名字
  2. 模板預設會打包es6和commonjs模組。如果需要打包同時支援多種環境的模組，請看下一節
  3. 模板使用prettier在git add時自動格式化程式碼
  4. 模板在git commit時強制使用angular的commit規範使用standard version釋出程式碼使用方法。
  5. 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欄位有兩種使用方式：

  1. 寫入一個umd檔案地址，如上面的示例。這種將會把所有的node端和瀏覽器端的程式碼都打包進去。（也就意味著如果你的專案只在瀏覽器端執行的話，程式碼裡也可能還會有冗餘的node端程式碼）。注意：使用這種方式後，打包工具會忽略module欄位，從而無法進行靜態優化。
  2. 如果你只需要部分檔案做替換，可以使用物件。但前面提到的文章已經說明了這種方式的不友好，所以我們模板中採用了rollup-plugin-replace來自動的實現檔案的分別打包瀏覽器和node環境程式碼。也就不需要使用browser欄位了.

模板中配置的外掛：

  1. rollup-plugin-node-resolverollup不知道如何處理從npm上安裝到node_modules的依賴，這個外掛就是告訴rollup如何查詢外部的模組。
  2. rollup-plugin-commonjs有些庫匯出的是commonjs的模組，而rollup預設是使用ES6標準，改外掛就是將commonjs模組轉成ES6模組。
  3. rollup-plugin-babel
  4. @commitlint/cli @commitlint/config-conventional husky standard-version 安裝這3個外掛是為了實現使用angular的commit規範，和規範的進行發版。更多的介紹看這裡 ~~5. babel-external-helpersbabel-cli 中的一個command，用來生成一段程式碼，包含 babel 所有的 helper 函式。babel-helpers包裡存放了很多幫助函式，如果babel檢測到某個檔案編譯時就會把這個函式放到模組的頂部。但是如果有多個檔案都是用了這些helpers就會導致多個模組重複定義。external-helpers外掛，它允許 Rollup 在包的頂部只引用一次 “helpers”，而不是每個使用它們的模組中都引用一遍。~~現在是預設支援了。 另外，.babelrc檔案放在src中，而不是根目錄下，這樣可以為不同的任務配置不容的.babelrc（比如測試）。babel模板裡配置的相容是 "browserslist": [ "iOS >= 8", "Android > 4.4" ] 每個庫檔案需求可能都不同。根據需要自行修改。 babel配置和相容性息息相關。後續會單獨再講。
  5. prettier lint-staged git add時格式化程式碼，便於不同人開發中程式碼風格統一。
  6. rollup-plugin-replace 設定環境變數值，從而便於為瀏覽器端和node端打包需要的程式碼。

程式碼地址

相關文章