用 vite 打包 typescript 库需启用库模式，配置 build.lib 指定入口、名称和 formats（es/umd），external 排除运行时依赖，并在 tsconfig.json 中开启 declaration、declarationdir 和 outdir；package.json 需设置 main、module、types、exports 和 files 字段以正确暴露模块与类型。
用 Vite 打包 TypeScript 库，核心是启用 库模式（lib mode），并配合正确的 TypeScript 编译与导出配置。它不是开发应用，而是产出可被其他项目直接 import 的通用 JS 模块（ESM + UMD），同时附带类型声明文件。
配置 vite.config.ts 为库模式
在 vite.config.ts 中明确设置 build.lib，指定入口、名称和输出格式：
-
entry：指向你的库主入口文件（如
src/index.ts） -
name：生成 UMD 全局变量名（仅对 UMD 格式生效，比如
window.MyLib） -
formats：推荐同时输出
['es', 'umd']，覆盖现代 ESM 导入和传统 CommonJS/UMD 场景 -
external：把 Vue、React、lodash 等运行时依赖排除在打包结果外，避免重复引入（通常写进
peerDependencies）
示例配置：
import { defineConfig } from 'vite'
import { resolve } from 'path'
export default defineConfig({
build: {
lib: {
entry: resolve(__dirname, 'src/index.ts'),
name: 'MyLib',
fileName: (format) => `mylib.${format}.js`,
formats: ['es', 'umd']
},
rollupOptions: {
external: ['vue', 'react', 'react-dom'],
output: {
globals: {
vue: 'Vue',
react: 'React',
'react-dom': 'ReactDOM'
}
}
}
}
})
确保 TypeScript 生成 .d.ts 声明文件
Vite 默认不生成类型声明，需在 tsconfig.json 中开启：
-
"declaration": true—— 启用声明文件生成 -
"declarationDir": "./dist/types"—— 指定输出目录（与打包产物分离更清晰） -
"outDir": "./dist"—— 必须设置，否则declaration不生效 -
"module": "ESNext"和"moduleResolution": "Node16"—— 保证与 ESM 打包行为一致
构建后，Vite 会自动把 .d.ts 文件输出到 dist/types，再通过 package.json 的 types 字段暴露出去。
package.json 中关键字段要对齐
用户安装你的包后，靠这些字段决定导入哪个文件、是否能获得类型提示：
-
"main"→ 指向 UMD 文件（如./dist/mylib.umd.js），供require()或 script 标签使用 -
"module"→ 指向 ESM 文件（如./dist/mylib.es.js），供import使用 -
"types"→ 指向主声明文件（如./dist/types/index.d.ts） -
"exports"（推荐）→ 更精确控制不同导入方式的解析路径，例如："exports": { ".": { "import": "./dist/mylib.es.js", "require": "./dist/mylib.umd.js", "types": "./dist/types/index.d.ts" } } -
"files"→ 明确声明发布到 npm 的文件列表（如["dist"]），避免 src 或测试文件误发
本地调试建议加软链接支持
开发中想在另一个项目里试用未发布的库，可用 npm link：
- 在库项目根目录执行：
npm link - 在测试项目中执行：
npm link your-package-name
注意：若库用了 exports 字段，确保测试项目 Node 版本 ≥ 12.20，并且没有因路径别名或 monorepo 工具干扰解析。遇到类型不识别，检查 types 路径是否正确指向 .d.ts 文件。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
