周末在家重構網關的Npm包，用到了rollup，記下筆記

rollup適合庫library的開發，而webpack適合應用程序的開發。 rollup也支持tree-shaking，自帶的功能。 package.json 也具有 module 字段，像 Rollup 和 webpack 2 這樣的 ES6 感知工具(ES6-aware tools)將會直接導入 ES6 模塊版本。

• module: cjs / es / umd / iife / amd
• module: umd 要指定name，即暴露的對象名

{output: {file: 'dist/index.umd.js',format: 'umd',name: 'ClientApi'} } 復制代碼

配置文件

rollup.config.js

$ rollup -c # compile $ rollup -c -w # compile and watch 復制代碼

rollup -w時，會拋出ROLLUP_WATCH環境變量為true

plugins

• 插件執行順序，從上至下
• 使用 rollup-plugin-json，令 Rollup 從 JSON 文件中讀取數據。
• Rollup 可以通過插件(rollup-plugin-node-resolve)導入已存在的 CommonJS 模塊。
• rollup-plugin-commonjs 插件就是用來將 CommonJS 轉換成 ES2015 模塊的。
• rollup-plugin-uglify壓縮代碼， import {uglify} from 'rollup-plugin-uglify', uglify()
• 使用 Babel 和 Rollup 的最簡單方法是使用 [rollup-plugin-babel]（github.com/rollup/roll…

{"presets": [["latest", {"es2015": {"modules": false}}]],"plugins": ["external-helpers"] } 復制代碼

我們設置"modules": false，否則 Babel 會在 Rollup 有機會做處理之前，將我們的模塊轉成 CommonJS，導致 Rollup 的一些處理失敗。

others

• external配置，在生成module文件時，可以用到，避免生成文件里有引用的包

總結

以上是生活随笔為你收集整理的rollup学习小记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。