create-react-app + ts 项目工程规范

乐观更新：在后台请求回数据之前前台就进行数据更新，保证用户体验

使用 create-react-app 创建 TS 项目，并进行工程规范

代码语言：javascript复制

npx create-react-app demo --template typescript

npx命令的功能是可以不用本地安装包而直接使用npm上面的包

import 相对路径问题

在传统的 JS 项目中，需要在 webpack 的 alias 中进行配置。

但是在 TS 项目中，直接在项目跟目录的 tsconfig.json 中添加

代码语言：javascript复制

{
  "compilerOptions": {
    "baseUrl": "./src", // 添加的这一行，指如果不是npm包，那么绝对路径将会从项目src目录下面找
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
} 

代码规范与格式化

prettier

yarn add --dev --exact prettier

Pre-commit Hook： 自动化矫正 npx mrm lint-staged

eslint

yarn add eslint-config-prettier -D 安装这个包，避免 ESlint 与prettier 冲突，并且在 package.josn 中添加

代码语言：javascript复制

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier" // 添加
    ]
  },

git 提交规范

工具 https://github.com/conventional-changelog/commitlint

yarn add @commitlint/{config-conventional,cli} -D

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

这个看版本，老版本是在 package.json 中添加

代码语言：javascript复制

"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}

新版本是直接 npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

commitlint 的具体规则可以前往上面地址查看

彩蛋

使用 json-server 进行数据 mock

代码语言：javascript复制

yarn add json-server -D

在根目录下面创建一个名为 __json_server_mock_ 的文件夹，并创建一个名为 db 的json文件。

然后执行

代码语言：javascript复制

json-server --watch __json_server_mock__/db.json

如果你是在根目录下面新建的 db.json ，那么就不要文件夹路径即可。但是为了项目管理，创建一个文件夹，同时前面后面使用 __ 开头结束表示这是项目的辅助目录，而不是主要的。

javascript yarn node.js json eslint

0 人点赞