使用create-react-app搭建react18+ts项目，并进行项目基本配置

一、使用create-react-app xxx --template typescript

create-react-app xxx --template typescript

通过--template typescript使得我们的项目支持ts

创建成功

打开该项目 open folder 终端 cd xxx
删除我们不必要的文件，删除严格模式，最终得到我们的目录结构

二、通过craco进行我们基本的webpack配置

npm i @craco/craco@alpha -D

为什么要加@alpha版本，是因为craco只支持webpack4版本，通过社区解决方案加上@alpha可以支持webpack5

1、配置别名

然后在根目录加上craco.config.js文件，去进行我们需要的webpack配置

打开package.json修改我们的启动脚本

//package.json文件
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

//craco.config.js文件
const path = require("path");

const resolve = (dir) => path.resolve(__dirname, dir);

module.exports = {
  webpack: {
    alias: {
      "@": resolve('src'),
    }
  }
}

此时，我们修改我们的路径，发现报错

因为我们的typescript进行路径检测报错，它不认识我们的@，所以我们打开tsconfig.json，增加

//tsconfig.json文件
"baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }

然后npm run start启动成功，报错解决

三、代码规范工具配置

1、集成editorconfig配置

在项目的根目录上增加.editorconfig文件

//.editorconfig文件
# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型（lf | cr | crlf）
trim_trailing_whitespace = true # 去除行尾的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅.md文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

2、使用prettier工具

对ctrl-s后的代码进行格式化

1、安装prettier

npm i prettier -D

2、增加.prettierrc

//.prettierrc文件
{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

3、增加.prettierignore

//.prettierignore
/build/*
.local
.output.js
/node_modules/*

**/*.svg
**/*.sh

/public/*

4、在package.json文件中增加脚本

//package.json文件
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject",
    "prettier": "prettier --write ."
  },

5、运行脚本

npm run prettier

格式化成功

3、使用ESLint检测

1、安装ESLint

npm i eslint -D

2、初始化ESLint配置

npx eslint --init

由于我们选择的是esm环境，代码中module.exports等commonjs代码会被ESLint检测到报错所以我们在eslint的env环境中增加node环境

//.eslintrc.js文件
env: {
    browser: true,
    es2021: true,
    node: true
  },

初始化成功

4、解决ESLint和prettier冲突的问题

npm install eslint-plugin-prettier eslint-config-prettier -D

添加prettier插件

//.eslintrc.js文件
extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],

四、配置项目结构并重置css

1、增加常见项目结构

2、css样式重置

1、安装并配置less

npm install craco-less@2.1.0-alpha.0

然后在craco.config.js中配置

//craco.config.js文件
const CracoLessPlugin = require('craco-less')
module.exports = {
  plugins: [{ plugin: CracoLessPlugin }],
  webpack: {
    alias: {
      '@': resolve('src')
    }
  }
}

2、安装normalize.css

npm i normalize.css

在index.tsx中引入重置样式

import 'normalize.css'
import '@/assets/css/index.less'

五、其它配置

安装路由

npm i react-router-dom

引入antd

npm install antd --save

安装redux

npm i redux react-redux @reduxjs/toolkit