react18源码-项目搭建

项目搭建

• 定义项目结构（monorepo）
• 定义开发规范（lint、commit、tsc、代码风格规范）
• 选择打包工具

项目结构

• monorepo

使用一个git仓库管理项目的相关的多个"模块/包/功能/应用"

• multirepo

使用多个 git仓库分别管理项目的每一个 模块/包/功能/应用

技术选型

简单工具

• npm workspace
• yarn workspace
• pnpm workspace

专业工具

• nx
• bit
• turborepo
• rush.js
• nx
• lerna

pnpm 初始化

安装

npm install -g pnpm  
pnpm init

初始化pnpm-workspace.yarml

在项目根目录下创建pnpm-workspace.yaml,并输入如下配置(链接):

packages:  
# all packages in direct subdirs of packages/  
- 'packages/*'

定义开发规范

• 代码规范：lint工具

安装eslint

pnpm i eslint -D -w

初始化

npx eslint --init

执行到这一步出现报错，提示使用-w安装一下

这时输入pnpm i -D -w @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest可以看到已经安装成功了

vscpde需要安装Prettier - Code formatter和eslint插件

在根目录下创建文件.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插件

pnpm i -D -w @typescript-eslint/eslint-plugin

代码风格

安装

pnpm i prettier -D -w

新建.prettierrc.json配置文件，添加配置

{  
 "printWidth": 80,  
 "tabWidth": 2,  
 "useTabs": true,  
 "singleQuote": true,  
 "semi": true,  
 "trailingComma": "none",  
 "bracketSpacing": true  
}

将prettier集成到eslint中

• eslint-config-prettier:覆盖eslint本身的规则
• eslint-plugin-prettier：用Prettier来接管修复代码即eslint --fix

pnpm i eslint-config-prettier eslint-plugin-prettier -D -w

为lint增加对应的执行脚本，并验证效果：

"lint": "eslint --ext .js,.ts,.jsx,.tsx --fix --quiet ./packages"

验证成功后，安装prettier与eslint的VSCode插件，并在setting中设置为保存后自动执行。

commit提交规范

安装[husky](https://www.npmjs.com/package/husky):用于拦截commit命令

pnpm i husky -D -w

初始化husky

npx husky install

将刚才实现的格式化命令pnpm lint纳入commit时husky将执行的脚本

npx husky add .husky/pre-commit "pnpm lint"

pnpm lint会对代码全量检查，当项目复杂后执行速度可能比较慢，届时可以考虑使用lint-staged，实现只对暂存区代码进行检查，通过commitlint对git提交信息进行检查，首先安装必要的库。

pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D -w

新建配置文件.commitlintrc.js

module.exports = {  
  extends: ["@commitlint/config-conventional"]  
};

集成到husky中

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: 添加一些测试代码等等

配置ts

{  
 "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"  
 }  
}

比较不同打包工具之间的区别

项目特点:

• 库,不是业务代码
• 希望工具