主题
搭建项目架构
本节课代码地址（请参考课程获取） 架子包括： 定义项目结构（
monorepo） 定义开发规范（lint、commit、tsc、代码风格） 选择打包工具 项目结构Multi-repo和Mono-repo该如何选择？Multi-repo每个库有自己独立的仓库，逻辑清晰，相对应的，协同管理会更繁琐。Mono-repo可以很方便的协同管理不同独立的库的生命周期，相对应的，会有更高的操 作复杂度。 参考资料：现代前端工程为什么越来越离不开 Monorepo?
Mono-repo技术选型
简单工具： npm workspace yarn workspace pnpm workspaces 专业工具： pnpm相比其他打包工具的优势： 依赖安装快 更规范（处理幽灵依赖问题） 参考资料：pnpm 是凭什么对 npm 和 yarn 降维打击的？
pnpm初始化
安装
bash
npm install -g pnpm
pnpm init初始化pnpm-workspace.yaml 定义开发规范 代码规范检查与修复 代码规范：lint工具
eslint安装：
bash
pnpm i eslint -D -w初始化：
bash
npx eslint --init.eslintrc.json 配置如下：
{
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
"plugin:prettier/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": ["@typescript-eslint", "prettier"],
"rules": {
"prettier/prettier": "error",
"no-case-declarations": "off",
"no-constant-condition": "off",
"@typescript-eslint/ban-ts-comment": "off"
}
}安装ts的eslint插件：
bash
pnpm i -D -w @typescript-eslint/eslint-plugin代码风格：prettier 安装：
bash
pnpm i prettier -D -w新建.prettierrc.json 配置文件，添加配置：
json
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": true,
"singleQuote": true,
"semi": true,
"trailingComma": "none",
"bracketSpacing": true
}将prettier 集成到eslint 中，其中： eslint-config-prettie r：覆盖ESLint 本身的规则配置 eslint-plugin-prettier ：用Prettier 来接管修复代码即eslint --fix
bash
pnpm i eslint-config-prettier eslint-plugin-prettier -D -w为lint 增加对应的执行脚本，并验证效果：
"lint": "eslint --ext .ts,.jsx,.tsx --fix --quiet ./packages"验证成功后，安装prettier 与eslint 的VSCode 插件，并在setting 中设置为保存后自 动执行。
commit规范检查
安装husky，用于拦截commit 命令：
bash
pnpm i husky -D -w初始化husky ：
bash
npx husky install将刚才实现的格式化命令pnpm lint 纳入commit 时husky 将执行的脚本：
bash
npx husky add .husky/pre-commit "pnpm lint"TODO：pnpm lint会对代码全量检查，当项目复杂后执行速度可能比较慢，届时可以考 虑使用lint-staged，实现只对暂存区代码进行检查 通过commitlint对git 提交信息进行检查，首先安装必要的库：
bash
pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D -w新建配置文件.commitlintrc.js ：
module.exports = {
extends: ["@commitlint/config-conventional"]
};集成到husky 中：
bash
npx husky add .husky/commit-msg "npx --no-install commitlint -e $HUSKY_GIT_PARAMS"conventional规范集意义： //提交的类型:摘要信息
<type>: <subject>常用的type 值包括如下: feat: 添加新功能 fix: 修复 Bug chore: 一些不影响功能的更改 docs: 专指文档的修改 perf: 性能方面的优化 refactor: 代码重构 test: 添加一些测试代码等等
配置tsconfig.json ：
{
"compileOnSave": true,
"compilerOptions": {
"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,
"baseUrl": "./packages"
}
}选择打包工具 比较不同打包工具的区别 参考资料：Overview | Tooling.Report我们要开发的项目的特点： 是库，而不是业务项目 希望工具尽可能简洁、打包产物可读性高 原生支持ESM 所以选择rollup ，安装：
bash
pnpm i -D -w rollup