create-react-app + ts 项目工程规范
乐观更新：在后台请求回数据之前前台就进行数据更新，保证用户体验
使用 create-react-app 创建 TS 项目，并进行工程规范
npx create-react-app demo --template typescriptnpx命令的功能是可以不用本地安装包而直接使用npm上面的包
import 相对路径问题
在传统的 JS 项目中，需要在 webpack 的 alias 中进行配置。
但是在 TS 项目中，直接在项目跟目录的 tsconfig.json 中添加
{
"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"
]
} 代码规范与格式化
yarn add --dev --exact prettier
Pre-commit Hook： 自动化矫正 npx mrm lint-staged
eslint
yarn add eslint-config-prettier -D 安装这个包，避免 ESlint 与prettier 冲突，并且在 package.josn 中添加
"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 中添加
"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
yarn add json-server -D在根目录下面创建一个名为 __json_server_mock_ 的文件夹，并创建一个名为 db 的json文件。
然后执行
json-server --watch __json_server_mock__/db.json如果你是在根目录下面新建的 db.json ，那么就不要文件夹路径即可。但是为了项目管理，创建一个文件夹，同时前面后面使用 __ 开头结束表示这是项目的辅助目录，而不是主要的。