Rollup打包

本文最后更新于:2024年4月25日 上午

安装

1
2
3
4
5
6
7
pnpm init
pnpm i rollup -D

# 不使用TS可忽略ts与ts插件安装
pnpm i typescript @types/node -D
# rollup ts打包插件与依赖包
pnpm i @rollup/plugin-typescript tslib -D

配置

TS 配置

tsc --init

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext" /* 使用ES-module */,
"moduleResolution": "node",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}

Rollup 配置

rollup.config.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { defineConfig } from 'rollup'
import typescript from '@rollup/plugin-typescript'

export default defineConfig({
input: ['src/main.ts'], // 打包入口,可有多个
output: [
// 可配置多个对象实现多个输出格式
{
dir: 'dist/esm', // 输出目录或文件
format: 'esm', // 模块格式
},
{
dit: 'dist/cjs',
format: 'cjs',
},
],
plugins: [typesctipt()], // 使用ts打包插件
})

打包命令

package.json设置typemodule, 添加build脚本执行rollup -c rollup.config.ts --configPlugin typescript

不使用ts写配置文件可改为rollup -c

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"type": "module",
"scripts": {
"build": "rollup -c rollup.config.ts --configPlugin typescript"
},
"devDependencies": {
"@rollup/plugin-typescript": "^11.0.0",
"@types/node": "^18.11.18",
"rollup": "^3.11.0",
"tslib": "^2.5.0",
"typescript": "^4.9.4"
}
}

使用pnpm build命令即可打包

src/main.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
interface Person {
name: string
age: number
}

const person: Person = {
name: 'foo',
age: 20,
}

const person2: Person = {
name: 'bar',
age: 30,
}

console.log(person.name)

Rollup会自动合并小模块和树摇(去除无用代码/模块)

dist/esm/main.js

1
2
3
4
5
const person = {
name: 'foo',
age: 20,
}
console.log(person.name)

Option 打包选项

通过构造函数defineConfig来获取打包选项的TS支持,打包配置可以是一个对象,也可以是一个配置数组,使用数组可以对不同的入口文件执行不同的打包选项

input

input选项指定入口文件

1
2
3
export default defineConfig({
input: ['src/main.ts', 'src/cli/build.ts']
})

output

output选项用于设置打包输出,可以设置为数组实现多个输出

1
2
3
4
5
6
7
8
9
10
11
12
export default defineConfig({
output: [
{
dir: 'dist/esm',
format: 'esm'
},
{
dir: 'dist/cjs',
format: 'cjs'
}
]
})

plugins

plugins选项用于添加插件

1
2
3
4
5
6
7
8
import { defineConfig } from 'rollup'
import pluginTypescript from '@rollup/plugin-typescript'

export default defineConfig({
plugins: [
pluginTypescript()
]
})

watch

watch选项用于监听模式下的配置 (直接在build命令后添加-w选项即可开启监听模式)

1
2
3
4
5
6
7
{
// ...
"scripts": {
"build": "rollup -c rollup.config.ts --configPlugin typescript",
"watch": "rollup -c rollup.config.ts --configPlugin typescript -w"
}
}
1
2
3
4
5
6
7
8
9
export default defineConfig({
watch: {
buildDelay: 500, // rebuild延时
clearScreen: true, // rebuild时清空控制台
skipWrite: false, // rebuild后是否跳过将结果写入磁盘
include: ['src/**'], // 监听目录
exclude: ['node_modules/**'] // 不监听目录
}
})

API rollup

一般使用打包选项即可完成所有的打包需求

1
2
3
4
5
6
7
8
9
10
11
12
13
import { rollup } from 'rollup'
import { inputOptions, outputOptions } from './configs/index.js'

async function build() {
const bundle = await rollup(inputOptions)

await bundle.generate(outputOptions)
await bundle.write(outputOptions)

bundle.close()
}

build()

API watch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { watch } from 'rollup'
import { inputOptions, outputOptions } from './configs/index.js'

const watcher = watch({
...inputOptions,
output: [outputOptions],
watch: {
exclude: ['node_modules/**', 'src/cli/**'],
include: 'src/**',
},
})

console.log('watching...')

watcher.on('restart', () => {
console.log('restarting...')
})

watcher.on('change', (id) => {
console.log(`change: ${id}`)
})

watcher.on('event', async (event) => {
if (event.code === 'BUNDLE_END') {
console.log('bundle end')
}
})

插件开发

插件格式

rollup插件为一个对象,通常使用函数接收用户参数来构造该对象

1
2
3
4
5
6
7
8
function rollupPluginAlias (): Plugin {
// ...预处理参数
return {
name: 'rollup-plugin-alias',
version: '0.0.0',
// ...各个hooks
}
}

resolveId

resolveId用于对模块路径的解析,入参为importee(当前模块路径),importer(使用当前模块者路径)

1
2
3
resolveId(importee: string, importer: string | undefined, options) {
return this.resolve(importee, importer, options)
}

Rollup打包
https://qingshaner.com/Rollup打包/
作者
清山
发布于
2023年1月28日
许可协议