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中文网