周末在家重構(gòu)網(wǎng)關(guān)的Npm包，用到了rollup，記下筆記

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

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

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

配置文件

rollup.config.js

$ rollup -c # compile $ rollup -c -w # compile and watch 復(fù)制代碼

rollup -w時(shí)，會(huì)拋出ROLLUP_WATCH環(huán)境變量為true

plugins

• 插件執(zhí)行順序，從上至下
• 使用 rollup-plugin-json，令 Rollup 從 JSON 文件中讀取數(shù)據(jù)。
• Rollup 可以通過插件(rollup-plugin-node-resolve)導(dǎo)入已存在的 CommonJS 模塊。
• rollup-plugin-commonjs 插件就是用來將 CommonJS 轉(zhuǎn)換成 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"] } 復(fù)制代碼

我們?cè)O(shè)置"modules": false，否則 Babel 會(huì)在 Rollup 有機(jī)會(huì)做處理之前，將我們的模塊轉(zhuǎn)成 CommonJS，導(dǎo)致 Rollup 的一些處理失敗。

others

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。