一、工程化配置
1.1 目录结构
1.1.1 Multi-repo VS Mono-repo
-
Multi-repo 每个库有自己独立的仓库,逻辑清晰,协同管理复杂
-
Mono-repo 很方便管理不同独立的库的生命周期,会有更高的操作复杂度
-
项目有很多包,同时管理多个不同的包,选择 Mono-repo,多个包之间又有着依赖关系
-
初始化 Mono-repo 配置
-
包管理工具 pnpm
-
link 来链接的
-
依赖处理比较快
- 更加规范:处理幽灵依赖
- 没有在依赖中显式声明的又被安装了的依赖(yarn、npm 历史遗留问题)
- 更加规范:处理幽灵依赖
-
安装:
jsnpm i -g pnpm pnpm init
-
-
新建 pnpm-workspace.yaml 文件
jspackages: # all packages in direct subdirs of packages/ - 'packages/*' // 根目录下的 packages 目录下的直接文件都是子项目
-
1.1.2 tsconfig.json
js
{
"compileOnSave": true,
"compilerOptions": {
"baseUrl": "./packages",//ts 基础入口
"target": "ESNext",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ESNext", "DOM"],
"moduleResolution": "Node",
"strict": true,
"sourceMap": true,
"resolveJsonModule": true,
"isolatedModules": true,
"esModuleInterop": true,
"noEmit": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": false,
"skipLibCheck": true
}
}
1.3 开发规范
1.3.1 代码规范
- eslint:pnpm i eslint -D -w
- -w:指明在根目录下安装依赖
- 建立 .gitignore 文件
- 初始化 eslint,使用 npx 命令:npx eslint --init
- pnpm i -D -w @typescript-eslint/eslint-plugin @typescript-eslint/parser
- pnpm i -D -w typescript(peer dependence)
.eslintrc.json
:eslint 配置文件
js
{
"env": {
"browser": true,
"es2021": true
},
"extends": [ // 继承其他 eslint 配置
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",// 用什么解析器把 js 代码解析成 ast 语法树
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"@typescript-eslint"
],
"rules": {
}
}
- 安装 ts 的 eslint 插件:
pnpm i -D -w @typescript-eslint/eslint-plugin
1.3.2 代码风格
- prettier
- pnpm i prettier -D -w
- 配置文件:
.prettierrc.json
- 可能会与 eslint 产生冲突
- pnpm i eslint-config-prettier eslint-plugin-prettier -D -w
- 为 lint 命令增加对应的执行脚本:"lint":'eslint --ext .js,.ts,.jsx,.tsx --fix --quiet ./packages'
1.3.3 代码提交
语法和风格检查 + 提交信息检查
- 安装 husky:pnpm i husky -D -w
- 初始化 git 仓库:git init
- 初始化 husky:npx husky install
- 将刚才实现的格式化命令 pnpm lint 纳入 commit 时 husky 将执行的脚本:
- npx husky add .husky/pre-commit "pnpm lint" (检查代码规范)
- 代码提交信息检查:
pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D -w
- 新建配置文件:.commitlintrc.js
JS
module.exports = {
extends:['@commitlint/config-conventional']
}
- 集成到 husky 中:npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"
- conventional 规范集:
js
// 提交的类型:摘要信息
1.4 打包工具
- 尽可能的简洁,打包产物可读性高
- 选择 rollup:pnpm i -D -w rollup
- 建立 script 脚本/rollup