使用React+Typescript构建项目

一、 创建React+Typescript项目

npx create-react-app project-name --template typescript

二、 配置Prettier

1. 添加prettier依赖

yarn add --dev --exact prettier

2. 根目录下创建prettier配置文件

echo {}> .prettierrc.json

3. 根目录下创建.prettierignore,配置要忽略格式化的文件

# Ignore artifacts:
build
coverage

三、 使用Pre-commit Hook在提交代码前进行格式化

1. lint-staged

npx mrm lint-staged

2. 在package.json中增加ts及tsx支持

原：

"lint-staged": {
    "*.{js,css,md}": "prettier --write"
}

增加后：

"lint-staged": {
    "*.{js,css,md,ts,tsx}": "prettier --write"
}

3.npx mrm lint-staged失败

E:\nodejs\node_cache\_npx\25144\node_modules\mrm\bin\mrm.js:55
                throw err;

Error: Cannot find module 'E:\nodejs\node_cache\_npx\25144\lib\node_modules\mrm-task-lint-staged'
Require stack:
- E:\nodejs\node_cache\_npx\25144\node_modules\mrm\src\index.js
- E:\nodejs\node_cache\_npx\25144\node_modules\mrm\bin\mrm.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at E:\nodejs\node_cache\_npx\25144\node_modules\mrm\src\index.js:164:18
    at new Promise (<anonymous>)
    at runTask (E:\nodejs\node_cache\_npx\25144\node_modules\mrm\src\index.js:154:9)
    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'E:\\nodejs\\node_cache\\_npx\\25144\\node_modules\\mrm\\src\\index.js',
    'E:\\nodejs\\node_cache\\_npx\\25144\\node_modules\\mrm\\bin\\mrm.js'
  ]
}

原因： Node.js（windows系统）:ExperimentalWarning: The fs.promises API is experimental 根本原因是node的版本不是最新的，而在项目引入的模块是最新的，node.js的版本低于模块的版本： 但是将node升级到最新稳定版还是会报错，于是决定降低mrm版本 解决：降低 mrm 版本

npx mrm@2 lint-staged

四、解决Prettier与ESLint格式冲突问题

1. 安装eslint-config-prettier依赖

yarn add eslint-config-prettier -D

2. 修改package.json中eslintConfig配置

使用Prettier的规则覆盖一部分冲突规则

原:

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

修改后：

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

五、使用commitlint设置代码提交内容的规范

1. 安装commitlint依赖

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

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

2. 配置hook

# Add hook
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

3. 提交规范

@commitlint/config-conventional (opens new window)

提交示例:

foo: some message # fails
fix: some message # passes

type-enum

值	含义
feat	新功能(feature)
fix	修补bug
docs	只改动了文档相关内容(documentation)
style	格式(不影响代码运行的变动，如去掉空格、改变缩进、增删分号)
build	构造工具的或者外部依赖的改动，例如webpack，npm
refactor	重构
revert	执行git revert打印的message
test	增加测试或者修改现有测试
perf	提升了性能
ci	与CI（持续集成服务）有关的改动
chore	不修改src或者test的其余修改，例如构建过程或辅助工具的变动

六、Mock方案-本地node服务器-json-server

json-server优点：

1. 配置简单，json-server甚至可以0代码30启动一个REST API Server
2. 自定义程度高
3. 增删改查真实模拟

1. 全局安装json-server

yarn global add json-server

2. 在项目中添加json-server

yarn add json-server -D

3. 创建db.json文件

项目根目录下创建__json_server_mock__文件夹，在文件夹中新增db.json文件 db.json:

{
  "user": []
}

4. 配置package.json文件

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "husky install",
    "json-server": "json-server __json_server_mock__/db.json --watch"
  },

5. 运行json-server

yarn json-server

6. 运行成功

yarn run v1.22.17
$ json-server __json_server_mock__/db.json --watch

  \{^_^}/ hi!

  Loading __json_server_mock__/db.json
  Done

  Resources
  http://localhost:3000/users

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...