pnpm 构建 Monorepo 项目
使用背景
因为公司要做的项目比较多，项目之间又会相互依赖。目前分为pc后台，pc商城，uniapp项目等等。所以为了代码的复用和代码的规范提交，决定引入pnpm来创建Monorepo项目。
Monorepo是什么呢（是多包单库管理）
Monorepo 简单的说，是指将公司的所有代码放到一个 Git / Mercurial / Subversion 的代码仓库中。对于很多没听说过这个概念的人而言，无异于天方夜谭。Git 仓库不应该是每个项目一个吗？对于很多用 monorepo 的公司，他们的 Git 仓库中不止有自己的代码，还包括了很多的依赖。基本上，只要把 monorepo 用 Git 拖下来，跑一下 ./scripts/install，就可以直接用 Buck / Bazel （在安装脚本中就装到了本地）编译仓库中的所有项目，并且提交修改（安装脚本配置好了代码提交环境，如果用的 Phabricator 的话，Gerrit 不用）
pnpm是什么呢
npm/yarn 采用了直接平铺的方式，而 pnpm 则是采用 .pnpm 隐藏目录隐藏真实的平铺结构，在使用链接(symbollink)的方式将真实安装的目录映射到 node_modules 下
为什么使用workspace呢
因为我们把项目剥离为业务组件层，通用api层，项目三层。项目引入通用api和业务组件相互依赖，所以我们搭建了内网npm。内网npm牵扯到了发包和版本号的问题，所以引入workspace 让项目内部进行引用类似这样
"devDependencies":{
"**":"workspace:*"
}
开始
第一步
我们在 packages 中新建以下几个目录。
├── packages
│ ├── ui-uniapp
│ ├── common-api
第二步
在根目录新建 pnpm-workspace.yaml，内容如下
packages:
- 'packages/*'
第三步
npm init
生成package.json后
第四步
强制pnpm安装依赖
执行工程自身 preinstall
当前 npm 工程如果定义了 preinstall 钩子此时会被执行。
"scripts": {
"preinstall": "node preinstall.js",
},
preinstall.js 中
if (!/pnpm/.test(process.env.npm_execpath || '')) {
console.warn(
`\u001b[33mThis repository requires using pnpm as the package manager ` +
` for scripts to work properly.\u001b[39m\n`
)
process.exit(1)
}
第五步
新增eslint stylelint prettier检测
"scripts": {
"preinstall": "node ./scripts/preinstall.js",
"lint-staged": "lint-staged",
"lint:eslint": "eslint --cache --max-warnings 0 \"packages/**/*.{vue,ts,tsx}\" --fix",
"lint:prettier": "prettier --write \"packages/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
},
"dependencies": {
"stylelint": "^14.0.1",
"stylelint-config-html": "^1.0.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-standard": "^23.0.0",
"stylelint-order": "^5.0.0",
"eslint": "^8.1.0",
"@typescript-eslint/eslint-plugin": "^5.3.0",
"eslint-config-prettier": "^8.3.0",
"eslint-define-config": "^1.1.2",
"eslint-plugin-jest": "^25.2.2",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^8.0.3",
"vue-eslint-parser": "^8.0.1",
"prettier": "^2.5.1",
"lint-staged": "^12.3.4",
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"prettier --write"
],
"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
"prettier --write--parser json"
],
"package.json": [
"prettier --write"
],
"*.vue": [
"prettier --write",
"stylelint --fix"
],
"*.{scss,less,styl,html}": [
"stylelint --fix",
"prettier --write"
],
"*.md": [
"prettier --write"
]
}
第六步
增加git钩子
我的钩子命令是 pnpm run lint-staged
husky
npm install husky --save-dev
npm set-script postinstall "husky install"
npm run postinstall
npx husky add .husky/pre-commit " pnpm run lint-staged"
git add .husky/pre-commit
第七步
引入提交方式
安装依赖 commitizen和cz-conventional-changelog
"scripts": {
"commit": "cz"
},
"config": {
"commitizen": {
"path": "cz-conventional-changelog"
}
},
- feat 增加新功能
- fix 修复问题/BUG
- upd 更新某功能
- style 代码风格相关无影响运行结果的
- perf 优化/性能提升
- refactor 重构
- revert 撤销修改
- test 测试相关
- docs 文档/注释
- chore 依赖更新/脚手架配置修改等
- workflow 工作流改进
- ci 持续集成
- mod 不确定分类的修改
- wip 开发中
- types 类型修改
