创建react源码项目-初始化项目

pnpm 初始化

pnpm init

声明pnpm-workspace.yaml

packages:
  - 'packages/*'

定义开发规范

pnpm i eslint -D -w // -w 代表项目根目录下安装

tslint指定语法规范

pnpm i eslint -D -w

npx eslint --init

eslint --init的步骤选择

• eslint只需要检测问题，语法样式交给prettier

• 项目不需要web框架

• 最终的配置信息

在安装过程中遇到这个问题，是因为pnpm不识别@typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest,用下面的方式。 修改方式

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

eslit 配置文件（.eslintrc.json）

• 默认生成的

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {}
}

• 自己增加的

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

prettier

pnpm i prettier -D -w

.prettierrc.json 配置

{
  "printwidth": 80,
  "tabwidth": 2,
  "useTabs": true,
  "singleQuote":true,
   "semi": true,
   "trailingcomma": "none",
   "bracketSpacing": true
}

解决prettier和eslit冲突

安装以下插件

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

commit 规范

husky拦截commit

pnpm i husky -D -w

初始化husky

npx husky install

commit时格式化

在commit的时候将package.json文件中的lint加入husky，在commit的时候执行

// package.json
// --quiet 不输出反馈的形式
"lint": "eslint --ext .ts,.tsx,.js,.jsx --fix --quiet ./packages" 

• husky init

会在项目中产生.husky文件夹

pnpm exec husky init

• husky在gui中使用，例如source tree

  • husky.sh 不使用gui可以不做相关配置 在react-source-learn/.husky/_/husky.sh

  export NVM_DIR="$HOME/.nvm"
  [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
  [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion
  
  # Set PATH to include pnpm
  export PATH="$PATH:/Users/wangyan/.nvm/versions/node/v18.0.0/bin"
  

  • pre-commit 提交代码执行fix检查

  pnpm lint
  

  这样配置，在命令行中commit没问题，但是gui中会不识别pnpm,gui中如下配置

  #!/usr/bin/env sh
  . "$(dirname -- "$0")/_/husky.sh"
  pnpm lint
  

  • commit-msg 执行commitlint的规范检查

  npx --no-install commitlint -e "$1"
  

  这样配置，在命令行中commit没问题，但是gui中会不识别npx,gui中如下配置

  #!/usr/bin/env sh
  . "$(dirname -- "$0")/_/husky.sh"
  npx --no-install commitlint -e "$1"
  

• 安装commit规范插件

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

• 应用commit规范

新建.commitlintrc.js

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

ts配置

// tsconfig.json
{
    "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"
    }
}

rollup打包

pnpm i -D -w rollup