2025-08-04

monorepo搭建前端项目

发音：/mɑːneɾpoʊ/ 嘛呢 rue 坡

使用 pnpm + Vite + monorepo + workspace 是目前构建项目的推荐实践，具备高性能、依赖共享、模块解耦等优势

# 一、从零开始构建 monorepo

# 1. 初始化 Monorepo 根目录

1.1 生成 package.json 文件

mkdir monorepo && cd monorepo
pnpm init

1.2 根目录下创建 pnpm-workspace.yaml 文件：

packages:
  - 'packages/*'

1.3 根目录下创建 .npmrc 文件，避免依赖提升问题：

shamefully-hoist=true

# 2. 创建 Vue 3 子项目（使用 Vite）

mkdir packages && cd packages
pnpm create vite vue-app --template vue

# 3. 配置子项目 package.json（建议）

3.1 编辑 packages/vue-app/package.json 文件，添加以下配置： // vue-app 为子项目名称和文件夹名称

{
  "name": "@monorepo/vue-app",
  "private": true
}

# 4. 配置根目录快速启动脚本（可选）

在根目录 package.json 中添加：

{
  "scripts": {
    "dev:vue": "pnpm -F @monorepo/vue-app dev"
  }
}

# 5.创建多个子项目，即重复 2 和 3 步骤

cd packages pnpm create vite vue-app1 --template vue pnpm create vite vue-app2 --template vue

# 6. 项目结构

monorepo/
├── pnpm-workspace.yaml
├── pnpm-lock.yaml
├── package.json
├── .npmrc
├── apps/     # 实际项目工程
└── packages/
    └── another-vue-app/        # Vue3 子项目或插件
        ├── src/
        ├── package.json
        └── vite.config.ts
    └── vue-app/        # Vue3 子项目或插件
        ├── src/
        ├── package.json
        └── vite.config.ts

# 二、配置项目的格式化工具

# 1. prettier

prettier 是什么？一个代码格式化工具，可以格式化任何代码，使代码更加美观，更加易于阅读，更加易于维护

i. 安装

pnpm add -D prettier --workspace-root

ii. 根目录下创建 .prettierrc 文件，配置如下：

{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": false,
  "useTabs": false,
  "tabWidth": 2,
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always"
}

iii. 在 CI/CD 中自动格式化，根目录下创建.lintstagedrc.json ；配置如下：

pnpm add -D lint-staged --workspace-root

.lintstagedrc.json

{
  "**/*.{js,ts,jsx,tsx}": ["prettier --write"]
}

# 2. Editorconfig

Editorconfig for VS Code 是什么？一个用于编辑器的配置文件，可以自动格式化代码，使代码更加美观，更加易于阅读，更加易于维护。

这是一个 VS Code 的插件，可以通过扩张商店安装

配置如下：

root = true

[*]
charset=utf-8
end_of_line=lf
insert_final_newline=true
indent_style=space
indent_size=2
max_line_length = 100

[*.{yml,yaml,json}]
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

# 三、在 `packages` 中创建一些模块

# 四、在 apps 下的项目中引入

# 1. infra

使用 umi 快速构建一个用于展示基础组件的项目

i. 初始化

pnpm dlx create-umi@latest

ii. 安装packages下的依赖

pnpm add @monorepo/ui @monorepo/icons @monorepo/pro-components --workspace

# 2. 一个业务项目

i. 使用 vite 创建一个 react 项目

pnpm create vite my-vue-app --template react-ts