rollup是一个JavaScript模块打包器，它对代码模块使用es6的标准格式，而不是commonjs或者AMD。
安装
npm i -D rollup
复制代码使用
rollup可以通过命令行接口、配置文件或者JavaScript Api这三种方式来调用。
- 命令行用法
假设入口是src/index.js，输出文件为dist/bundle.js，输出格式为esmodule，则使用以下命令
$ rollup src/index.js -o dist/bundle.js -f esm
复制代码-f是--output.format的缩写，指定创建的bundle的类型，可选值值是cjs、esm、system、amd、iife、umd。
这种方法在生成sourcemap时灵活性不高。
- 配置文件用法 假设入口是
src/index.js，输出文件为dist/bundle.js，输出格式为commonjs。
创建一个rollup.config.js的文件，内容如下
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm'
}
}
复制代码使用配置文件的方式
$ rollup --config [configfilname]
$ rollup -c [configfilname]
复制代码如果配置文件rollup.config.js和package.json在同一层级，那么rollup会自动使用配置文件，可以不用写配置文件的名字。
rollup和其他工具集成
1. npm包
对于npm包来说，rollup不能直接处理依赖，需要通过插件rollup-plugin-node-resolve。
npm上既有esmodule格式的包，也有commonjs的包，rollup可以直接处理第一种，第二种需要通过额外的插件rollup-plugin-commonjs将commonjs转成es2015。
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm'
},
plugins: [
resolve(),
commonjs(),
]
}
复制代码babel
babel需要通过插件rollup-plugin-babel来引入。然后在配置文件中添加
import babel from 'rollup-plugin-babel';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm'
},
plugins: [
babel({
include: 'src/**'
exclude: 'node_modules/**'
}),
]
}
复制代码其他
代码压缩
要对rollup打包后的代码进行压缩，可以引入插件rollup-plugin-uglify，但是这个插件只支持es5，不支持es6+。所以实际开发中建议在代码被rollup打包后另外使用工具压缩，比如uglify-es和terser。但是uglify-es作者目前不再维护，至于terser是对uglify-es的fork，并且保留了与uglify-es和uglify-js@3的API和CLI兼容性，在最新版的webpack@4中也用terser-webpack-plugin取代了uglify-webpack-plugin，所以推荐使用terser来压缩es6+代码。
总结
看网上说rollup由于没有额外代码所以打包的体积比较小，经过测试，使用terser压缩rollup打包后代码对比webpack@4打包，webpack@4的包体积更小。
总的来说，rollup使用方便，很容易将多文件打包成单文件，而且打包后的代码纯净易读，不像webpack打包后有很多额外代码。缺点是对输出成多文件基本不支持。对于小型的代码库比较推荐。