Rollup

Reference

• rollup-commonjs-umd (opens new window)
• rollupjs-note (opens new window)
• Setting JS Build (opens new window)
• Intro to Rollup (opens new window)
• juejin Rollup usage (opens new window)
• Rollup docs (opens new window)

起步

Node >= 10

安装依赖

npm install -g rollupjs

打包脚本

1. 命令行打包

源码地址 (opens new window)

rollup main.js --file bundle.js --format iife

2. 使用配置文件 rollup.config.js

源码地址 (opens new window)

rollup main.js --file bundle.js --format umd --config rollup.config.js

3. 打包输出多种模块规范文件

rollup main.js --file bundle.js --format umd
rollup main.js --file bundle.js --format cjs

常用插件

1. 编译JS代码

yarn add -D rollup-plugin-babel

2. 编译 TS 代码

官方插件

yarn add -D @rollup/plugin-typescript

但另一个包用的也比较多，上面这个包会出现无法解决的问题，同事是使用这个包：

yarn add -D rollup-plugin-typescript2

3. 加载第三方模块

yarn add -D @rollup/plugin-node-resolve

4. 将CJS模块的第三方库转换为ES6模块规范

yarn add -D @rollup/plugin-commonjs typescript

5. 压缩代码

yarn add -D rollup-plugin-terser

6. 全局变量替换插件

yarn add -D @rollup/plugin-replace

7. 路径别名解析插件

yarn add -D @rollup/plugin-alias

8. 转换JSON文件为ES6模块

yarn add -D @rollup/plugin-json