核心是启用build.lib配置，配合入口、导出与类型声明，支持script引入和esm/node import；需设external排除依赖、tsc生成.d.ts、package.json配置main/module/types/exports/files，并本地验证后发布。
用 Vite 实现现代库模式打包发布，核心是启用 build.lib 配置，配合合理的入口、导出与类型声明，让库既能在浏览器中直接 script 引入，也能被 Node/ESM 项目正常 import。整个过程不依赖 Webpack，体积小、构建快、开箱即用。
1. 初始化项目并设置库入口
创建项目时建议文件夹名与将来 npm 包名一致（如 my-utils），然后手动创建入口文件：
- 在
src/index.ts（或.js）中导出全部 API，例如：export { debounce, throttle, deepClone } from './helpers' - 确保入口文件是单一、明确的模块，Vite 会以此为起点进行 tree-shaking 和格式生成
2. 配置 vite.config.ts 启用库模式
关键配置项必须包含 build.lib 和 rollupOptions.external：
-
entry指向你的主入口路径（如resolve(__dirname, 'src/index.ts')） -
name是 UMD 全局变量名（如MyUtils），仅影响umd格式 -
fileName支持函数写法，可区分格式：fileName: (format) => `my-utils.${format}.js` -
external列出运行时不打包的依赖（如['vue', 'lodash']），避免重复打包 -
globals为 UMD 提供全局变量映射（如{ vue: 'Vue' }）
3. 生成类型声明文件（.d.ts）
Vite 默认不生成类型，需借助 tsc 单独处理：
- 新建
tsconfig.build.json，开启"declaration": true和"emitDeclarationOnly": true - 指定
"include"为源码路径（如["src/**/*.ts"]） - 在
package.json的build脚本中串联："build": "vite build && tsc -p tsconfig.build.json" - 最终产出的
.d.ts文件需通过"types"字段在package.json中声明
4. 完善 package.json 发布元信息
除了常规字段，以下几项直接影响用户如何引入你的库：
-
"main"：指向 UMD 版本（如lib/my-utils.umd.js） -
"module"：指向 ESM 版本（如lib/my-utils.es.js） -
"types"：指向类型入口（如lib/my-utils.d.ts） -
"exports"（推荐）：更精确控制不同导入方式的解析路径："exports": { ".": { "import": "./lib/my-utils.es.js", "require": "./lib/my-utils.umd.js", "types": "./lib/my-utils.d.ts" } } -
"files"：显式声明要发布的目录（如["lib"]），避免误发源码或测试文件
5. 本地验证与发布
发布前务必本地测试两种主流用法：
- 在 HTML 中用
<script type="module"></script>引入 ESM 版本，检查能否调用 - 在另一个 npm 项目中
npm link或yarn link本地链接，测试import和类型提示 - 确认无误后执行
npm login→npm publish - 首次发布注意包名未被占用（可用
npm info your-pkg-name查询）
