Rollup.js
JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序
比webpack要轻量许多，用于弥补gulp的无tree-shaking是很好的选择，最大的用途是打包生产一个库文件
打出来的包干净，没有其他冗余代码
安装
npm install --global rollup
安装成功后，运行 rollup，若打印出使用说明则安装成功
常用命令
rollup [待打包文件路径] -f [指定格式]
例 rollup src/main.js -f cjs
-f 选项（--output.format 的缩写）指定了所创建 bundle 的类型
bundle类型 --amd（异步模块定义），cjs（commonjs），es（将软件包保存为es模块文件），iife（适合作为<script>标签），umd（以amd、cjs、iife为一体）
rollup [待打包文件路径] -o [包文件路径] -f [指定格式]
例 rollup src/main.js -o
bundle.js -f cjs
配置文件
简单命令
在项目中创建一个名为rollup.config.js的文件，增加如下代码
export default
{
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'cjs'
}
}
使用 rollup -c 或 rollup --config ，自动寻找 rollup.config.js配置文件
同样的命令行选项会覆盖配置文件中的选项
可指定其他配置文件
rollup --config rollup.config.dev.js
具体配置项
input
入口文件路径
output--{} or [{}]
file--string
输出文件
format--string
输出格式--amd/ es6 / iife / umd / cjs
name--string
当format为iife和umd时必须提供，将作为全局变量挂在window(浏览器环境)下：若name："A"则window.A=...
sourcemap--boolean
生成bundle.map.js文件，方便调试
plugins--string[]
插件配置，常用插件列表参考下文
external--string[]
告诉rollup不要将指定的包打包，而作为外部依赖
global--{}
例 {'jquery':'$' } //告诉rollup全局变量$即是jquery
插件
通过相对路径，将一个入口文件和一个模块创建成了一个简单的 bundle。随着构建更复杂的 bundle，通常需要更大的灵活性——引入 npm 安装的模块、通过 Babel 编译代码、和 JSON 文件打交道等。
常用插件
rollup-plugin-json
从json文件中读取数据
rollup-plugin-node-resolve
识别node_modules中的包
rollup-plugin-commonjs
将commonjs模块转换为es6
node_modules中的包大部分都是commonjs格式的，要在rollup中使用必须先转为ES6语法
rollup-plugin-babel
rollup-plugin-typescript2
打包typescript项目
注意有坑--网上教程大多数写的使用rollup-plugin-typescript，但rollup-plugin-typescript使用后存在各种问题
rollup-plugin-replace
替换待打包文件里的一些变量
rollup-plugin-uglify
压缩包
只支持es5
不支持es6 +
rollup-plugin-terser
压缩包
支持es6+
package.json
scripts
"build": "rollup -c" //配置指定的rollup执行命令
运行 npm run build，不用每次输入一长串rollup命令
rollup.watch
Rollup 提供了 rollup.watch 函数，当它检测到磁盘上单个模块已经改变，它会重新构建你的文件束。 当你通过命令行运行 Rollup，并带上 --watch 标记时，此函数会被内部使用
使用
命令行 rollup -c --watch
package.json 中配置scripts
参考文档
https://www.rollupjs.com/rollup.js中文网
网友评论