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，即暴露的对象名

代码语言：javascript复制

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

配置文件

rollup.config.js

代码语言：javascript复制

$ 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…

代码语言：javascript复制

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

我们设置"modules": false，否则 Babel 会在 Rollup 有机会做处理之前，将我们的模块转成 CommonJS，导致 Rollup 的一些处理失败。

others

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

rollup.js 编程算法 ecmascript webpack javascript

0 人点赞