Vite 打包 TypeScript 组件库需启用库模式，配置 build.lib 指定 entry、name、formats（es/umd），external 排除 vue/react 等依赖，tsconfig 开启 declaration 生成 .d.ts，package.json 设置 main/module/types/exports/files 字段。
在 JavaScript（或 TypeScript）中用 Vite 打包发布一个通用的 NPM 组件库，核心是启用 库模式（Library Mode），并确保产物支持多种模块系统（ESM / UMD）、附带类型声明、正确导出入口，且不把框架或运行时依赖打包进去。
配置 vite.config.ts 启用库模式
在 vite.config.ts 中设置 build.lib，明确指定：
-
entry：库的主入口文件路径，如
src/index.ts或packages/index.ts -
name：UMD 全局变量名（仅影响 UMD 格式，例如挂载到
window.MyUI） -
formats：推荐同时输出
['es', 'umd']，覆盖现代 ESM 导入和传统环境 -
fileName：可按格式动态命名，如
(format) => `mylib.${format}.js`
同时通过 rollupOptions.external 排除运行时依赖（如 vue、react），避免重复打包；并在 output.globals 中映射其全局变量名（用于 UMD）：
rollupOptions: {
external: ['vue'],
output: {
globals: { vue: 'Vue' }
}
}
生成并输出类型声明文件（.d.ts）
Vite 默认不生成类型文件，需配合 TypeScript 配置：
立即学习“Java免费学习笔记（深入）”；
- 在
tsconfig.json中开启："declaration": true、"outDir": "./dist"、"declarationDir": "./dist/types" - 确保
"module": "ESNext"和"moduleResolution": "Node16"，与 ESM 打包行为一致 - 构建命令建议组合执行：
vite build && tsc -p tsconfig.json --emitDeclarationOnly，或使用插件如vite-plugin-dts自动处理
完善 package.json 的导出字段
让其他项目能正确 import 组件、类型和样式，package.json 必须包含：
-
"main"：指向 UMD 文件（如./dist/mylib.umd.js） -
"module"：指向 ESM 文件（如./dist/mylib.es.js） -
"types"或"typings"：指向主类型文件（如./dist/types/index.d.ts） -
"exports"：推荐用对象语法精确控制不同导入方式的解析路径 -
"files"：只包含真正要发布的目录/文件（如["dist", "README.md", "package.json"]） -
"peerDependencies"：声明运行时依赖（如"vue": "^3.2.0"），避免用户安装冲突版本
组件库结构与入口设计建议
组件库不是单个组件，而是可灵活使用的集合：
- 主入口
src/index.ts应统一导出所有组件（export { Button, Input, Dialog }）及 install 方法（用于 Vue 插件式注册） - 若支持按需导入，可额外提供
src/components/Button/index.ts等子入口，并在exports中配置子路径 - 样式资源建议单独导出（如
import 'mylib/dist/style.css'），或通过插件自动注入（如@vitejs/plugin-vue处理<style>）
