vite生产构建依赖rollup，需通过build.rollupoptions精细配置输出路径、格式、外部依赖、类型声明及资源分割；output支持单对象或多数组形式，format必填，external控制排除依赖，globals映射umd全局变量，tsconfig需启用declaration，manualchunks优化代码分割。
Vite 底层用 Rollup 做生产构建，所以想精细控制打包产物，就得通过 build.rollupOptions 配置 Rollup 的输入、输出和插件行为。TypeScript 项目里，重点不是“能不能配”，而是怎么配得准、配得稳、不丢类型也不漏格式。
TypeScript 项目中 rollupOptions 输出路径与格式控制
输出配置集中在 build.rollupOptions.output，它决定最终生成哪些文件、放在哪、用什么模块规范。
-
dir指定输出根目录（适合多入口或多格式场景） -
file指定单个输出文件路径（仅适用于单入口 + 单格式） -
format必须指定，常见值有：'es'（ESM）、'cjs'（CommonJS）、'umd'（浏览器全局变量）、'iife'（立即执行函数） -
name在umd或iife下才有意义，用于声明挂载到window上的全局变量名 -
entryFileNames和chunkFileNames控制文件命名规则，支持[name]、[hash]、[extname]等占位符
例如，同时输出 ESM 和 CJS 格式：
export default defineConfig({
build: {
rollupOptions: {
output: [
{
dir: 'dist',
format: 'es',
entryFileNames: '[name].mjs',
chunkFileNames: '[name]-[hash].mjs',
assetFileNames: 'assets/[name]-[hash][extname]'
},
{
dir: 'dist',
format: 'cjs',
entryFileNames: '[name].cjs',
chunkFileNames: '[name]-[hash].cjs'
}
]
}
}
})
注意：output 可以是对象（单格式）或数组（多格式），但不能混用 file 和 dir —— 二者互斥。
外部依赖处理（避免打包进产物）
TypeScript 库常需把 react、vue、lodash-es 这类运行时依赖“剔除”，靠 external 实现：
- 字符串数组：
['vue', 'react'] - 正则：
/^(vue|@vue\/)/ - 函数：更灵活，比如只排除
node_modules下的包：
external: (id) => id.startsWith('node_modules/')
搭配 output.globals，可让外部依赖在 UMD 中映射为全局变量：
output: {
format: 'umd',
name: 'MyLib',
globals: {
vue: 'Vue',
'vue-router': 'VueRouter'
}
}
TypeScript 类型声明与 Rollup 打包协同
Rollup 不生成 .d.ts 文件，这事必须交给 TypeScript 编译器自己完成：
-
tsconfig.json中确保开启：{ "compilerOptions": { "declaration": true, "declarationMap": true, "outDir": "./dist", "rootDir": "./src" }, "include": ["src"] } - Rollup 配置里不需要插件来生成类型文件，但要用
@rollup/plugin-typescript编译.ts源码（否则 Rollup 读不懂 TS）：
import typescript from '@rollup/plugin-typescript'
export default defineConfig({
build: {
rollupOptions: {
plugins: [typescript({ tsconfig: './tsconfig.json' })]
}
}
})
静态资源与代码分割优化
Vite 默认对 node_modules 做代码分割，但你可以进一步定制 manualChunks：
output: {
manualChunks: {
vendor: ['vue', 'vue-router', 'pinia'],
utils: ['lodash-es', 'date-fns']
}
}
配合 assetFileNames 把图片、字体等静态资源统一归入 assets/ 目录：
assetFileNames: 'assets/[name]-[hash][extname]'
这样既清晰又利于 CDN 缓存策略。
不复杂但容易忽略
