关键是要配置库模式（lib mode）及配套TypeScript与导出声明：在vite.config.ts中设置build.lib指定entry、name、formats(['es','umd'])和external；tsconfig.json启用declaration、declarationDir与outDir；package.json补充main、module、types、exports和files字段。
用 Vite 打包一个可被其他项目直接 import 的 JavaScript 库，关键不是写代码，而是配置好库模式（lib mode）和配套的 TypeScript、导出声明。它不生成网页，而是产出 ESM + UMD 两种格式的 JS 文件，附带类型定义（.d.ts），并确保第三方依赖不被打进去。
配置 vite.config.ts 启用库模式
在 vite.config.ts 中设置 build.lib，明确入口、名称和输出格式：
-
entry：指向你的主入口文件，比如
src/index.ts -
name：UMD 模式下挂载到全局的变量名，如
MyLib（浏览器中可通过window.MyLib访问） -
formats：至少包含
['es', 'umd']；若需支持 Node.js，可加'cjs' -
external：列出所有运行时依赖（如
vue、react），避免打包进产物；它们应作为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 生成类型声明文件
Vite 默认不生成 .d.ts，必须在 tsconfig.json 中显式开启：
立即学习“Java免费学习笔记（深入）”；
-
"declaration": true—— 启用声明文件生成 -
"declarationDir": "./dist/types"—— 类型文件单独输出到dist/types/ -
"outDir": "./dist"—— 必须设置，否则declaration不生效 -
"module": "ESNext"和"moduleResolution": "Node16"—— 匹配 ESM 打包行为，避免类型解析错乱
完善 package.json 的导出字段
仅靠打包还不够，npm 需要明确知道怎么加载你的模块。在 package.json 中补充这些字段：
-
"main"：指向 UMD 版本，如"dist/mylib.umd.js" -
"module"：指向 ESM 版本，如"dist/mylib.es.js" -
"types"：指向类型入口，如"dist/types/index.d.ts" -
"exports"：推荐使用，更精确控制不同环境下的入口（例如区分 require/import、开发/生产） -
"files"：只发布必要目录，如["dist", "package.json", "README.md"]，避免源码泄露
验证打包结果是否可用
运行 vite build 后检查 dist/ 目录：
- 是否有
mylib.es.js和mylib.umd.js -
dist/types/下是否有对应结构的.d.ts文件 - 在另一个项目里尝试
import MyLib from 'your-lib-name'或require('your-lib-name')，确认能正常解析且类型提示可用
不复杂但容易忽略——漏掉 external 会导致体积膨胀，没配 types 字段会让使用者失去类型支持，exports 缺失则可能在某些 bundler 下 fallback 到错误入口。
