rollup.js 初体验
最近准备写一个工具包 @kuizuo/utils，由于要将其发布到npm上，必然就要兼容不同模块（例如 CommonJS 和 ESModule），通过打包器可以很轻松的将代码分别编译成这两种模块。
恰好 rollup 3 正式发布，也算是来体验一下。
为什么不是Webpack？
rollup 的特色是 ES6 模块和代码 Tree-shaking，这些 webpack 同样支持，除此之外 webpack 还支持热模块替换、代码分割、静态资源导入等更多功能。
当开发应用时当然优先选择的是 webpack，但是若你项目只需要打包出一个简单的 bundle 包，并是基于 ES6 模块开发的，可以考虑使用 rollup。
**rollup 相比 webpack，它更少的功能和更简单的 api，是我们在打包类库时选择它的原因。**例如本次要编写的工具包就是这类项目。
支持打包的模块格式
目前常见的模块规范有：
-
IFFE：使用立即执行函数实现模块化 例：
(function(){})() -
CJS：基于 CommonJS 标准的模块化
-
AMD：使用 Require 编写
-
ESM：ES 标准的模块化方案 ( ES6 标准提出 )
-
UMD：兼容 CJS 与 AMD、IFFE 规范
以上 Rollup 都是支持的。
使用
官方有一篇文章 创建你的第一个bundle ，不过英文文档比较难啃，同时通过命令方式+选项的方式来打包肯定不是工程化想要的。
配置文件
所以这里所演示的是通过 rollup.config.js 文件，通过rollup -c 来打包。
一个示例文件如下
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'cjs'
}
};
执行 rollup -c 就会将main.js 中所引用到的js代码，通过commonjs的方式编写到bundle.js，就像这样。
'use strict';
var foo = 'hello world!';
function main () {
console.log(foo);
}
module.exports = main;
但是更多的情况下，是需要同时打包多个模块格式的包，就可以在output传入数组，例如
export default {
input: 'src/main.js',
output: [{
file: 'bundle.cjs',
format: 'cjs'
}, {
file: 'bundle.mjs',
format: 'esm'
}]
};
便会生成 bundle.cjs, bundle.mjs 两种不同的模块格式的文件。同时在 package.json 中，指定对应模块路径，在引入时，便会根据当前的项目环境去选择导入哪个模块。
{
"main": "bundle.cjs",
"module": "bundle.mjs"
}
结合rollup插件使用
不过更多情况下，rollup需要配置插件来使用。官方插件地址：rollup/plugins: The one-stop shop for official Rollup plugins (github.com)
比如使用 rollup-plugin-esbuild 插件来使用esbuild（也是一个打包器，并且构建非常快）来加快打包速度。可以使用 @rollup/plugin-babel 借助babel，编译成兼容性更强的js代码或者代码转换等等。
以下是rollup+插件的配置示例，来源 antfu/utils/rollup.config.js ，也作为本次工具包的配置。
import esbuild from 'rollup-plugin-esbuild'
import dts from 'rollup-plugin-dts'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import json from '@rollup/plugin-json'
import alias from '@rollup/plugin-alias'
const entries = [
'src/index.ts',
]
const plugins = [
alias({
entries: [
{ find: /^node:(.+)$/, replacement: '$1' },
],
}),
resolve({
preferBuiltins: true,
}),
json(),
commonjs(),
esbuild({
target: 'node14',
}),
]
export default [
...entries.map(input => ({
input,
output: [
{
file: input.replace('src/', 'dist/').replace('.ts', '.mjs'),
format: 'esm',
},
{
file: input.replace('src/', 'dist/').replace('.ts', '.cjs'),
format: 'cjs',
},
],
external: [],
plugins,
})),
...entries.map(input => ({
input,
output: {
file: input.replace('src/', '').replace('.ts', '.d.ts'),
format: 'esm',
},
external: [],
plugins: [
dts({ respectExternal: true }),
],
})),
]
以下是对应的npm 安装命令
pnpm i -D rollup @rollup/plugin-alias @rollup/plugin-commonjs @rollup/plugin-json @rollup/plugin-node-resolve rollup-plugin-esbuild rollup-plugin-dts
关于rollup更多使用，不妨参见 rollup官方文档，以及一些使用 rollup 来打包的开源项目。
类似工具
类似的工具还有 webpack.js, esbuild, parceljs
不过就打包类库而言，并不要求过强的性能，有个相对简单的配置就足以，而 rollup 正是这样的打包工具。