Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码。相对于webpack，Rollup更加小巧。
大多数知名框架/库都在使用Rollup作为模块打包器,如vue、react、 three.js、moment等。
rollup的安装
yarn add rollup --dev
rollup的使用
-
安装完成后node_modules/.bin中会自动添加相应的rollup程序，我们就可以在命令行中通过yarn rollup的方式来运行。
-
创建rollup.config.js文件
rollup.config.js文件是主文件，文件中我们定义相应配置来完成我们的需求。也可以指定与默认 rollup.config.js 文件不同的配置文件：rollup.config.dev.js、rollup.config.prod.js。
- 配置rollup.config.js文件
- 单文件打包
export default {
input: 'src/index.js', // 输入文件(单入口打包)
output: { // 输出文件
file: 'dist/bundle.js', // 单个文件输出方式
format: 'iife' // 输出格式
},
// plugins为一个数组，插件是rollup唯一扩展途径
plugins: []
}
-
多文件打包
input可以改为数组模式或者对象的形式。
file只能输出单个文件，输出多个需要使用dir。
format的iife立即执行函数会将所有模块放入同一个函数，无法实现代码拆分，需使用amd或commonjs标准。
export default {
input:['src/index.js','src/album.js'], // 多入口打包，数组模式
output: {
dir: 'dist', // 输出多个需要使用dir
format: 'amd'
},
// plugins为一个数组，插件是rollup唯一扩展途径
plugins: []
}
export default {
input:{ // 多入口打包，对象模式
foo: 'src/index.js',
bar: 'src/album.js'
}
output: {
dir: 'dist',
format: 'amd'
},
// plugins为一个数组，插件是rollup唯一扩展途径
plugins: []
}
运行yarn rollup --config 会默认执行rollup.config.js文件，也可以通过yarn rollup --config rollup.config.dev.js命令，来针对不同的环境使用不同的配置。
rollup插件的使用
rollup并不像其他打包工具有多种扩展方式，插件是rollup唯一扩展途径。
使用yarn add的方式来安装插件，如
yarn add rollup-plugin-json --dev
安装完成之后在文件中引用
import json from 'rollup-plugin-json'
引用过后在plugins中添加相应插件，之后就可以正常使用了
plugins: [
json()
]
-
安装rollup-plugin-node-resolve模块
帮助 Rollup 查找外部模块
安装方法与rollup-plugin-json一致 -
安装rollup-plugin-commonjs模块
rollup只能处理ESM的模块打包，无法处理commonjs模块，我们可以安装
rollup-plugin-commonjs模块进行相应的处理。
安装方法与rollup-plugin-json一致
选用原则
建议
如果我们正在发开应用程序，需要引用大量的第三方模块、HMR的功能提升体验或是应用过大需要分包，rollup功能满足上还是有所欠缺。
如果我们正在开发一个框架或者类库，这些优点就特别有必要。大多数知名框架/库都在使用Rollup作为模块打包器,如vue、react、 three.js、moment等。