├── packages # 模块目录
│   ├── package-a
│   │   ├── src
│   │   ├── package.json
│   ├── package-b
│   │   ├── src
│   │   ├── package.json
|—— apps  # 应用目录
│   ├── app-a
│   │   ├── src
│   │   ├── package.json
│   ├── app-b
│   │   ├── src
│   │   ├── package.json
├── packages.json # 项目根目录的 package.json
├── pnpm-workspace.yaml # pnpm 工作区配置文件
├── pnpm-lock.yaml
├── package.json
├── README.md

pnpm-workspace.yaml

pnpm-workspace.yaml 是 pnpm 的工作区配置文件，用于指定工作区中的模块和应用的目录。

packages:
  - "packages/*"
  - "apps/*"

环境版本锁定

在 monorepo 项目中，我们需要确保所有模块使用相同的环境版本，以避免出现环境不一致的问题。我们可以通过在 package.json 中指定 engines 字段来实现环境版本锁定。

// packages.json
"engines": {
  "node": ">=14.0.0",
  "pnpm": ">=7.0.0"
}

严格模式，确保安装不符合要求的版本报错显示。

#.npmrc
engine-strict=true

规范的统一化管理

TypeScript

在 monorepo 项目中，我们可以使用 TypeScript 来提高代码的可维护性和可读性。我们可以通过在 tsconfig.json 中指定 compilerOptions 字段来实现 TypeScript 的配置。

pnpm -Dw add typescript @types/node

根目录下创建 tsconfig.json 文件，子包统一配置 TypeScript 编译选项。

// tsconfig.json
"compilerOptions": {
  "module": "esnext",
  "target": "esnext",
  "strict": true,
  "skipLibCheck": true,
  "baseUrl": "",
}

每个子包下创建 tsconfig.json 文件，子包独立配置 TypeScript 编译选项。

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "declaration": true,
    "declarationDir": "dist/types"
  },
  "include": ["src"]
}

prettier

prettier 是一个代码格式化工具，可以自动格式化代码，使其符合指定的代码风格。

pnpm -Dw add prettier

根目录下创建 prettier.confiig.js 文件，子包统一配置 prettier 格式化选项。

module.exports = {
  semi: true,
  trailingComma: "es5",
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
};

排除文件，避免格式化不必要的文件。

#.prettierignore
node_modules
dist

git 提交规范

排除文件

#.gitignore
node_modules
dist

commitizen

commitizen 是一个用于规范 git commit 提交的工具，可以确保提交信息符合一定的规范，从而提高代码的可维护性和可读性。

pnpm -Dw add @commitlint/cli @commitlint/config-conventional commitizen cz-git

@commitlint/cli 是 commitlint 的命令行工具，用于检查提交信息是否符合规范。
@commitlint/config-conventional 是 commitlint 的规范配置，用于指定提交信息的格式。
commitizen 是一个用于规范 git commit 提交的工具，可以确保提交信息符合一定的规范。
cz-git 是一个用于规范 git commit 提交的工具，可以确保提交信息符合一定的规范。

// package.json
"scripts": {
  "commit": "git-cz"
},
"config": {
  "commitizen": {
    "path": "./node_modules/cz-git"
  }
}

创建 commitlint.config.js 文件，去定义 i 一些 commitlint 提交规范。

module.exports = {
  extends: ["@commitlint/config-conventional"],
  rules:{
    "type-enum":[2, "always",]
  }
};

husky

husky 是一个用于规范 git commit 提交的工具，可以确保提交信息符合一定的规范，从而提高代码的可维护性和可读性。

# 安装 husky
pnpm -Dw add husky
# 初始化 husky
pnpx husky init

配置

#!/usr/bin/env sh
pnpm run lint

以上是对整个工程做的一些统一的一些规范化管理，可以根据自己的项目需求，做更多的规范管理。

代码的统一化管理

统一打包

这个统一打包主要针对公共的库，比如 utils、hooks、components 等等，这些库是各个应用都会用到的，所以我们可以统一打包，然后发布到 npm 上，这样各个应用就可以直接安装使用了。

创建打包文件

可以再根目录创建 scripts 文件夹，然后创建 build.js 文件，用于打包公共库。

具体参考vue3的打包方式，使用rollup进行打包。build.js

添加脚本

在 package.json 中添加打包脚本。

"scripts": {
  "build": "node scripts/build.js"
}

执行打包

pnpm run build

建立包依赖

通过软链接的方式，将公共库链接到各个应用中，这样各个应用就可以直接使用公共库了。

// package.json
"dependencies": {
  "package-a": "workspace:*"
}

发布

pnpm login

发布

pnpm publish

总结

monorepo 是一种代码管理方案，是一个策略、思想，而不是一个工具。主要就是通过规范化、统一化的方式，来提高代码的可维护性和可读性，从而提高开发效率。以上只是简单的介绍了 monorepo 方案的实施，具体的实现还需要根据项目的需求和团队的技术栈来决定。Vue3 采用的就是 monorepo 方式进行项目代码管理。 有兴趣的可以对照 vue3源码去了解具体的实施细节。