rollup學習小記

週末在家重構網關的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文件時，能夠用到，避免生成文件裏有引用的包