Vue3 企业级优雅实战 - 组件库框架 - 11 组件库的打包构建和发布

回顾第一篇文章中谈到的组件库的几个方面，只剩下最后的、也是最重要的组件库的打包构建、本地发布、远程发布了。

1 组件库构建

组件库的入口是 packages/yyg-demo-ui，构建组件库有两个步骤：

1. 添加 TypeScript 的配置文件： tsconfig.json
2. 添加 vite.config.ts 配置文件，配置打包方式。

1.1 tsconfig.json

在 packages/yyg-demo-ui 中添加 tsconfig.json 文件：

{
   
  "compilerOptions": {
   
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "declaration": true,
    "baseUrl": "."
  },
  "include": ["../**/*.ts", "../**/*.d.ts", "../**/*.tsx", "../**/*.vue"],
  "exclude": ["../**/node_modules/"]
}

1.2 vite.config.ts

打包构建时需要提取类型定义，可以使用 vite 插件 vite-plugin-dts。首先在 packages/yyg-demo-ui 中添加该插件为开发依赖：

pnpm instal