Vite 库模式构建

使用 Vite library mode 打包组件库/工具库时的入口、external 与多格式输出要点。

#type / concept #status / growing #tech / dev / frontend #resource / javascript

[!info] 关联笔记

所属：插件与 SSR MOC

相关：库打包与 d.ts · 生产构建

Vite 库模式构建

这个概念为什么出现

应用模式倾向打包依赖；组件库若把 react/vue 打进包，会造成重复与体积灾难，并破坏宿主版本。

[!abstract] 一句话理解 build.lib 产出库入口包；peer 依赖通过 external 保持外置。

最小配置直觉

import { defineConfig } from 'vite'
import path from 'node:path'

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'InventoryUI',
      formats: ['es', 'cjs'],
      fileName: (format) => `inventory-ui.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'vue'],
    },
  },
})

实践清单

peerDependencies 与 external 对齐
类型声明另策（tsc/dts 插件）
用真实宿主项目联调
注意 CSS 是否应单独导出

本节总结

库模式第一原则：不要替宿主打包它自己的框架。

自测题

为什么 React 组件库通常 external react？

参考答案

保证使用宿主的 React 实例，避免双 React 与体积膨胀。