库模式构建

Vite 支持构建库文件，输出适合 npm 发布的格式。

库模式配置

JavaScript

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyLib',
      formats: ['es', 'cjs'],
      fileName: (format) => `my-lib.${format}.js`
    }
  }
})

配置选项说明

选项	说明
entry	入口文件路径
name	库的全局变量名（UMD 格式）
formats	输出格式
fileName	输出文件名

输出格式

格式	说明	输出文件
es	ES Module	.mjs 或 .js
cjs	CommonJS	.js
umd	UMD	.umd.js
iife	立即执行函数	.iife.js

完整库构建配置

JavaScript

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyLib',
      formats: ['es', 'cjs', 'umd'],
      fileName: (format) => `my-lib.${format}.js`
    },
    rollupOptions: {
      // 外部化依赖
      external: ['vue', 'lodash'],
      output: {
        // 为外部化依赖提供全局变量
        globals: {
          vue: 'Vue',
          lodash: '_'
        }
      }
    }
  }
})

注意：库依赖应外部化，避免打包到产物中。

TypeScript 类型生成

Bash

# 安装 vue-tsc
npm add -D vue-tsc

Bash

# 构建时生成类型
vue-tsc --declaration --emitDeclarationOnly --outDir dist
vite build

package.json 配置

JSON

{
  "name": "my-lib",
  "version": "1.0.0",
  "main": "dist/my-lib.cjs.js",
  "module": "dist/my-lib.es.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/my-lib.es.js",
      "require": "./dist/my-lib.cjs.js",
      "types": "./dist/index.d.ts"
    }
  },
  "files": ["dist"]
}

构建输出结构

text

dist/
├── my-lib.es.js      # ES Module
├── my-lib.cjs.js     # CommonJS
├── my-lib.umd.js     # UMD
└── index.d.ts        # 类型声明

要点总结

build.lib 配置库模式构建
formats 指定输出格式
external 外部化依赖
需额外生成 TypeScript 类型