CShame | 博客

monorepo实战

1. 技术选型

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

2. 流程

2.1 基础架构搭建

首先，初始化一个最基本的项目目录结构，包括 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

Happy Coding