【从0实现最接近官方版本的React】课程学习记录

项目结构

其中简单的介绍了 Multi-repo 和 Mono-repo 的区别，详细的介绍，推荐这篇文章：现代前端工程为什么越来越离不开 Monorepo?

这里也简单的记录一下其中的区别：

Multi-repo每个库有自己独立的仓库，逻辑清晰，相对应的，协同管理会更繁琐。
Mono-repo可以很方便的协同管理不同独立的库的生命周期，相对应的，会有更高的操作复杂度。

pnpm初始化

安装 pnpm npm i -g pnpm

执行 pnpm init 进行初始化

新建 pnpm-workspace.yaml 文件，参考：pnpm.io/zh/pnpm-wor…

pnpm-workspace.yaml 定义了工作空间的根目录，并能够使您从工作空间中包含 / 排除目录。默认情况下，包含所有子目录。

指定packages文件夹下的子文件夹为子项目

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

定义开发规范

pnpm i eslint -D -w -D指的是devDependencies，-w指的是workspace，意思是最外层，因为是monorepo结构，所以安装的时候需要指定该依赖安装到哪个项目里，而-w就是安装到最外层的workspace里

peer dependence指的是，既需要用，又不必安装的依赖，这句话这样看很矛盾，举个例子，开发一个react组件库供人使用，发包的时候就不需要将react安装进去，因为使用你组件库的人肯定会安装react，你自己就不用再打包一遍react了，所以react就是你这个组件库的peer dependence

如果出现 available resolver这种错误，应该是pnpm不能识别包最后的 @latest，这个是npm可以识别的，需要删除了再进行安装

对于eslintrc进行解读各个配置共同组成eslint的规则：eslint.cn/docs/user-g…

{
   "env": { // eslint跑的环境
    "browser": true,
    "es2021": true,
    "node": true
   },
   "extends": [ // 继承规则，里面写明了某条具体的规则是否打开
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended", // 这里就对应了【plugins】里的 @typescript-eslint 的规则合集，
    "prettier", // 对应了【plugins】里的 prettier 的规则合集
    "plugin:prettier/recommended"
   ],
   "parser": "@typescript-eslint/parser", // 使用什么解析器来解析js代码，解析成抽象语法树（AST），默认的eslint的解析器是没办法解析ts代码的，所以需要使用ts的解析器
   "parserOptions": { // parser的配置
    "ecmaVersion": "latest", // 解析什么版本的ecma代码，默认是es5
    "sourceType": "module" // 如果你的代码是 ECMAScript 模块，需要写成module
   },
   "plugins": ["@typescript-eslint", "prettier"], // 一些规则的合集
   "rules": { // 一些具体的lint规则，或许可以理解为规则合集【plugins】中没有覆盖到的一些规则
    "prettier/prettier": "error",
    "no-case-declarations": "off",
    "no-constant-condition": "off",
    "@typescript-eslint/ban-ts-comment": "off"
   }
}

eslint来处理代码规范，虽然也可以处理代码风格，但是prettier在处理代码风格的方面，更强大更专业，所以使用prettier来处理代码风格，各司其职

代码规范：比如提交的时候不能有console.log，或者不能有声明里，但是未使用的变量，驼峰命名还是横杠连接
代码风格：字符串是单引号还是双引号，句末加不加分号

因为 eslint本身也有代码风格的检测功能，所以和 prettier 会有冲突，所以需要解决这个冲突：pnpm i eslint-config-prettier eslint-plugin-prettier -D -w

将prettier集成到eslint中，其中：

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

比如现在我的package.json里的lint脚本，如下：

    "lint": "eslint --ext .js,.ts,.jsx,.tsx --fix --quiet ./packages"
    意思是我如果 npx lint，就会执行eslint xxxx后续这一坨，具体功能是
    --ext 代表文件后缀，对什么文件生效，这里有 .js、.ts、.jsx、.tsx
    --fix 意思是执行eslint --fix，因为安装了 eslint-plugin-prettier，所以prettier会接管这个命令，不用eslint来进行修复，修复代码风格就交给prettier了
    --quiet 意思是不输出反馈
    ./packages 意思是针对packages目录

本节TODO

了解eslintrc的相关配置：
- eslint.cn/docs/user-g…
- zhuanlan.zhihu.com/p/98617401
prettier 与 eslint 关系，巩固
husky，lintstaged巩固
pnpm 配置，与monorepo的关系
monorepo 与 multirepo
/*和 / 的区别
- www.manongjc.com/detail/32-m…

【React学习记录】1、搭建项目架构

项目结构

pnpm初始化

定义开发规范

本节TODO