使用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
複製代碼

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支持打包出ES六、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端打包須要的代碼。

代碼地址