Rollup打包

安装

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

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext" /* 使用ES-module */,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

Rollup 配置

rollup.config.ts

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设置type为module, 添加build脚本执行rollup -c rollup.config.ts --configPlugin typescript

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

package.json

{
  "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

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

const person = {
  name: 'foo',
  age: 20,
}
console.log(person.name)

Option 打包选项

官方文档：Configuration Options | Rollup (rollupjs.org)

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

input

input选项指定入口文件

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

output

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

export default defineConfig({
  output: [
    {
      dir: 'dist/esm',
      format: 'esm'
    },
    {
      dir: 'dist/cjs',
      format: 'cjs'
    }
  ]
})

plugins

plugins选项用于添加插件

import { defineConfig } from 'rollup'
import pluginTypescript from '@rollup/plugin-typescript'

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

插件列表:rollup/awesome: ⚡️ Delightful Rollup Plugins, Packages, and Resources (github.com)

watch

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

{
  // ...
  "scripts": {
		"build": "rollup -c rollup.config.ts --configPlugin typescript",
    "watch": "rollup -c rollup.config.ts --configPlugin typescript -w"
  }
}

export default defineConfig({
  watch: {
    buildDelay: 500,              // rebuild延时
    clearScreen: true,            // rebuild时清空控制台
    skipWrite: false,             // rebuild后是否跳过将结果写入磁盘
    include: ['src/**'],          // 监听目录
    exclude: ['node_modules/**']  // 不监听目录
  }
})

API rollup

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

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

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插件为一个对象，通常使用函数接收用户参数来构造该对象

function rollupPluginAlias (): Plugin {
  // ...预处理参数
  return {
    name: 'rollup-plugin-alias',
    version: '0.0.0',
    // ...各个hooks
  }
}

resolveId

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

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