全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[搭建篇]

<think>我们正在构建一个基于Vite和Ant Design Vue的monorepo项目，使用pnpm workspace进行管理。以下是步骤指南： ### 1. 全局安装pnpm（如果尚未安装） ```bash npm install -g pnpm ``` ### 2. 创建项目根目录并初始化 ```bash mkdir my-monorepo cd my-monorepo pnpm init ``` ### 3. 创建pnpm-workspace.yaml文件 在根目录下创建`pnpm-workspace.yaml`，定义工作区内的包位置： ```yaml packages: - &#39;packages/**&#39; - &#39;apps/**&#39; ``` ### 4. 创建目录结构 建议创建两个主要目录： - `packages/`：存放共享的包（如组件、工具函数等） - `apps/`：存放具体的应用 创建目录： ```bash mkdir packages apps ``` ### 5. 创建Vue3应用（使用Vite和Ant Design Vue） 进入`apps`目录，创建应用（例如admin）： ```bash cd apps pnpm create vite admin --template vue-ts cd admin ``` 安装Ant Design Vue（v4版本）： ```bash pnpm install ant-design-vue@next ``` ### 6. 配置Ant Design Vue按需引入 在`apps/admin/src/main.ts`中配置： ```typescript import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; import Antd from &#39;ant-design-vue&#39;; import &#39;ant-design-vue/dist/reset.css&#39;; const app = createApp(App) app.use(Antd) app.mount(&#39;#app&#39;) ``` ### 7. 创建共享包（可选） 在`packages`目录下创建共享包，例如一个工具包： ```bash cd packages mkdir utils cd utils pnpm init ``` 编写工具函数（例如`packages/utils/index.ts`）： ```typescript export function add(a: number, b: number) { return a + b; } ``` ### 8. 在应用中使用共享包 在admin应用中安装共享包（使用workspace协议）： ```bash pnpm add @my-monorepo/utils@workspace:* --filter admin ``` 注意：`@my-monorepo/utils`是我们在`packages/utils/package.json`中设置的包名，需要保持一致。同时，在根目录下执行该命令，通过`--filter`指定应用。 然后在admin应用的代码中引入： ```typescript import { add } from &#39;@my-monorepo/utils&#39; console.log(add(1, 2)); // 3 ``` ### 9. 配置根目录的脚本 在根目录的`package.json`中添加脚本，以方便运行各应用： ```json { "scripts": { "dev:admin": "pnpm run --filter admin dev", "build:admin": "pnpm run --filter admin build" } } ``` ### 10. 安装所有依赖 在根目录运行： ```bash pnpm install ``` ### 11. 运行项目 ```bash pnpm run dev:admin ``` ### 注意事项 - **依赖提升**：pnpm会自动处理依赖，将共同的依赖提升到根目录的`node_modules`中，节省空间。 - **Ant Design Vue样式**：我们引入了`reset.css`，这是Ant Design Vue v4的样式文件，确保样式正确。 - **TypeScript**：由于我们使用了Vite的vue-ts模板，所以项目已经配置了TypeScript。 ### 常见问题 1. **如果出现找不到模块`@my-monorepo/utils`，请检查**： - 共享包的`package.json`中的name是否与安装时一致 - 是否在根目录运行了`pnpm install` - 使用`--filter`安装时是否指定了正确的应用名称（即admin应用的package.json中的name） 2. **如何添加新的应用？** 重复步骤5，然后更新根目录的脚本。 3. **如何添加新的共享包？** 在`packages`下创建新目录，然后在使用的地方通过`pnpm add <package-name>@workspace:* --filter <target-app>`安装。 ### 总结 至此，我们使用pnpm workspace搭建了一个包含Vite和Ant Design Vue的monorepo项目。我们创建了一个Vue3应用并集成了Ant Design Vue，同时创建了一个共享工具包并在应用中使用。 §§相关问题§§ 1. 如何在monorepo中管理多个Vue应用之间的共享组件？ 2. 如何配置Vite以在monorepo中正确解析路径别名？ 3. 如何将monorepo中的项目发布到私有npm仓库？ 4. 如何为monorepo项目添加统一的代码风格检查和格式化（如ESLint和Prettier）？</think>### 使用 pnpm workspace 搭建 Vite + Ant Design Vue 的 Monorepo 项目 #### 1. **初始化项目结构** ```bash # 创建项目根目录 mkdir my-monorepo && cd my-monorepo # 初始化pnpm工作区 pnpm init touch pnpm-workspace.yaml ``` 在 `pnpm-workspace.yaml` 中定义工作区： ```yaml packages: - &#39;packages/**&#39; # 共享包目录 - &#39;apps/**&#39; # 应用目录 ``` #### 2. **创建基础应用** ```bash # 创建Vue3应用 pnpm create vite apps/main-app --template vue-ts cd apps/main-app # 安装Ant Design Vue pnpm install ant-design-vue pnpm install unplugin-vue-components -D # 按需加载插件 ``` #### 3. **配置 Vite 集成 Ant Design** 在 `apps/main-app/vite.config.ts` 中添加： ```typescript import Components from &#39;unplugin-vue-components/vite&#39;; import { AntDesignVueResolver } from &#39;unplugin-vue-components/resolvers&#39;; export default defineConfig({ plugins: [ Components({ resolvers: [AntDesignVueResolver()], }), ], }); ``` #### 4. **创建共享包** ```bash # 创建共享组件包 mkdir -p packages/components/src touch packages/components/package.json ``` 在 `packages/components/package.json` 中添加： ```json { "name": "@my-monorepo/components", "version": "1.0.0", "main": "src/index.ts", "dependencies": { "ant-design-vue": "^4.0.0" } } ``` #### 5. **配置工作区依赖** 在根目录执行： ```bash # 安装工作区依赖 pnpm add ant-design-vue -w pnpm add unplugin-vue-components -wD # 链接本地包到应用 pnpm add @my-monorepo/components@workspace:* --filter main-app ``` #### 6. **配置跨包引用** 在 `tsconfig.json` 中添加路径映射： ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@my-monorepo/*": ["packages/*/src"] } } } ``` #### 7. **添加启动脚本** 在根目录 `package.json` 中添加： ```json { "scripts": { "dev": "pnpm run --filter main-app dev", "build": "pnpm run --filter main-app build", "preinstall": "npx only-allow pnpm" // 强制使用pnpm } } ``` #### 8. **目录结构示例** ``` my-monorepo/ ├── apps/ │ └── main-app/ │ ├── src/ │ ├── vite.config.ts │ └── package.json ├── packages/ │ └── components/ │ ├── src/ │ └── package.json ├── pnpm-workspace.yaml └── package.json ``` #### 9. **验证项目** 在 `main-app` 中使用 Ant Design 组件： ```vue <script setup> import { Button } from &#39;ant-design-vue&#39;; </script> <template> <Button type="primary">工作区按钮</Button> </template> ``` 启动项目： ```bash pnpm run dev ``` ### 关键优势说明 1. **依赖共享**：通过顶层 `-w` 安装的依赖（如 Ant Design）会被所有子包复用[^4] 2. **按需加载**：`unplugin-vue-components` 自动处理 Ant Design 的组件导入[^2] 3. **隔离开发**：每个应用/包可独立开发，通过 `--filter` 指定运行范围[^3] 4. **类型安全**：TypeScript 路径映射确保跨包引用类型安全[^5] ### 常见问题解决 **依赖提升警告**：在 `.npmrc` 添加： ``` public-hoist-pattern[]=*ant-design-vue* public-hoist-pattern[]=*unplugin* ``` **样式丢失问题**：确保在入口文件导入： ```css /* main-app/src/main.css */ @import &#39;ant-design-vue/dist/reset.css&#39;; ```