Skip to main content

rollup.js 初体验

· 4 min read
wenhao

rollup.js

近期准备写一个工具包 @wenhao/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 来打包。

一个示例文件如下

rollup.config.js
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'cjs'
}
};

执行 rollup -c 就会将main.js 中所引用到的js代码,通过commonjs的方式编写到bundle.js,就像这样。

bundle.js
'use strict';

var foo = 'hello world!';

function main () {
console.log(foo);
}

module.exports = main;

但是更多的情况下,是需要同时打包多个模块格式的包,就可以在output传入数组,例如

rollup.config.js
export default {
input: 'src/main.js',
output: [{
file: 'bundle.cjs',
format: 'cjs'
}, {
file: 'bundle.mjs',
format: 'esm'
}]
};

便会生成 bundle.cjs, bundle.mjs 两种不同的模块格式的文件。同时在 package.json 中,指定对应模块路径,在引入时,便会根据当前的项目环境去选择导入哪个模块。

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 ,也作为本次工具包的配置。

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 正是这样的打包工具。

相关文章

【实战篇】最详细的Rollup打包项目教程

一文带你快速上手Rollup

Loading Comments...