monorepo实战

1. 技术选型

  • pnpm: 包依赖管理工具
  • changesets: 包版本管理工具
  • eslint,pretter: 代码规范工具
  • commitizen,commitlint: 提交规范工具
  • husky,lint-staged: git hook相关工具
  • vitepress: 文档服务工具

2. 流程

2.1 基础架构搭建

  • [x] 初始化目录

首先,初始化一个最基本的项目目录结构,包括 package.json,README.md,以及 packages 下的各个项目模块,其中 shared 为公共方法模块,其中每个模块的命名都以 @my-scope/xx (xx为项目模块名称)。

.
├── package.json
├── packages/
│   ├── pkg1/
├── |    ├──package.json
├── |    ├──src/
│   ├── pkg2/
├── |    ├──package.json
├── |    ├──src/
│   └── shared/
├── |    ├──package.json
├── |    ├──src/
├── README.md
  • [x] 添加pnpm包管理
npm install pnpm -g

并在根目录的 package.json 中添加如下脚本来限制包的安装:

// 此行命令将限制使用 pnpm 来进行 install 操作
"scripts": {
  "preinstall": "npx only-allow pnpm"
}

创建 pnpm-workspace.yaml 文件,并添加如下配置,将 packages 下所有子目录纳入工作空间进行管理:

packages:
  # 所有在 packages/ 子目录下的 package
  - 'packages/**'

在根目录 package.json 中添加 shared 作为依赖模块,后续安装后即可在其他模块使用:

"dependencies": {
  "@my-scope/shared": "workspace:*"
}
  • [x] 添加changesets版本管理工具
pnpm install @changesets/cli -DW
pnpx changeset init

后续,只需安装以下命令进行开发,版本生成以及版本发布即可:

// 开发人员在完成开发后添加 changeset 文件信息
pnpx changeset add

// 管理人员在发布版本前消费 changeset 进行 changelog 生成
pnpx changeset version

// 确认 changelog 和各项流程后发布包
pnpx changeset publish

2.2 规范工具配置

  • [x] 添加 ESlint、Prettier 代码规范工具
pnpm install eslint 

// 如果使用 Typescript
pnpm install typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser -DW

// 如果使用 Prettier
pnpm install prettier eslint-plugin-prettier -DW

创建 .eslintrc.js

module.exports = {
  extends: [
   ‘standard’
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    sourceType: 'module',
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json']
  },
  plugins: ['@typescript-eslint', 'prettier']
}

如果使用 prettier 则创建 .prettierrc 文件,并添加如下配置

semi: false
singleQuote: true
printWidth: 80
trailingComma: 'none'
arrowParens: 'avoid'

如果使用 Typescript 则创建 tsconfig.json 文件,并添加如下配置

{
  "compilerOptions": {
    "allowJs": true,
    "strict": true,
    "module": "ES6",
    "target": "ES2018",
    "noImplicitAny": false,
    "declaration": true,
    "moduleResolution": "Node",
    "esModuleInterop": true,
    "jsx": "preserve",
    "sourceMap": true,
    "lib": ["ES2018", "DOM"],
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true
  },
  "include": ["packages", "commitlint.config.js", ".eslintrc.js"],
  "exclude": ["node_modules", "**/dist", "docs"]
}

同时在 package.json 中添加校验命令,后续即可输入命令进行全量校验和自动修复:

"scripts": {
  "lint": "eslint --ext .js,.ts",
  "lint:fix": "eslint --ext .js,.ts --fix",
}
  • [x] 添加 Commitizen,Commitlint 提交规范校验工具

接下来,先安装 commitizen 全局工具并安装 cz-conventional-changelog 适配器:

// 全局安装
npm install commitizen -g
// 项目中安装
pnpm install cz-conventional-changelog -DW

在 package.json 中添加相关配置使得 commitzen 可以读取相对应的适配器:

"config": {
    "commitizen": {
      "path": "cz-conventional-changelog"
    }
  }


后续开发完成提交可以使用 cz 命令进行,并按照提示进行填写即可:

git cz

完成了 commit 规范脚手架工具配置后,我们再安装 commitlint 相关依赖进行提交校验:

pnpm install @commitlint/cli @commitlint/config-conventional -DW

创建 commitlint.config.js 文件,并添加如下代码:

module.exports = {extends: ['@commitlint/config-conventional']}
  • [x] 添加husky、lint-staged

接下来,再来安装 git hook 相关的工具来确保在提交时触发相应的校验工作:

pnpm install husky lint-staged -DW

这里使用的 husky 版本 > 6,因此需要进行初始化相关配置:

pnpm set-script prepare "husky install"
pnpm run prepare

生成 .husky/pre-commit hook 并添加 lint-staged 执行命令:

npx husky add .husky/pre-commit 'npx lint-staged'

在 package.json 中添加相应 lint-staged 规则来触发 eslint 进行增量代码校验:

"lint-staged": {
  "*.{js,ts}": [
    "eslint --fix",
        "git add"
  ]
}

生成 .husky/commit-msg hook 并添加 commilint 执行命令:

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'

2.3 文档配置服务

  • [x] 添加vitepress文档服务
pnpm install vitepress -DW

在 package.json 中添加如下脚本

"scripts": {
  "docs:dev": "vitepress dev docs", // 启动本地文档服务
  "docs:build": "vitepress build docs" // 构建打包文档
}

配置 vitepress 目录结构如下,可前往官网查看相关配置字段:

├─ docs
│  ├─ .vitepress
│  │  └─ config.js
│  └─ index.md

更多配置https://vitepress.vuejs.org