create-react-app构建项目

全局安装 create-react-app

1
2
3
4
5
# 配置npm国内源
yarn config set registry https://registry.npm.taobao.org/

# 全局安装 create-react-app
yarn global add create-react-app

初始化项目

1
2
# npx create-react-app my-app --template typescript
yarn create react-app my-app --template typescript

删除.git

因为是个人开发,不是团队开发,所以不需要 git

1
2
3
4
5
6
7
8
admin@admin MINGW64 /d/www
$ cd my-app/

admin@admin MINGW64 /d/www/my-app (master)
$ rm -rf .git

admin@admin MINGW64 /d/www/my-app
$

配置 import 的 baseurl

在 tsconfig.json 中添加 baseUrl 配置项

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
"compilerOptions": {
"baseUrl": "./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"]
}

配置格式化规则

在项目根目录下新建文件 .prettierrc.js ,定义格式化规则:

1
2
3
4
5
module.exports = {
printWidth: 100, //单行长度
tabWidth: 4, //缩进长度
semi: false, //句末使用分号
}

在项目根目录下新建文件 .prettierignore ,语法同.gitignore,定义忽略格式化的文件:

1
2
build
coverage

主要文件介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
admin@admin MINGW64 /d/www/my-app
$ ll src/
total 12
-rw-r--r-- 1 admin 197121 564 Jul 27 09:39 App.css
-rw-r--r-- 1 admin 197121 273 Jul 27 09:39 App.test.tsx
-rw-r--r-- 1 admin 197121 556 Jul 27 09:39 App.tsx # 描述app本身
-rw-r--r-- 1 admin 197121 366 Jul 27 09:39 index.css
-rw-r--r-- 1 admin 197121 500 Jul 27 09:39 index.tsx # 入口文件,准备工作
-rw-r--r-- 1 admin 197121 2632 Jul 27 09:39 logo.svg
-rw-r--r-- 1 admin 197121 41 Jul 31 18:05 react-app-env.d.ts # 引入预先定义好的typescript类型
-rw-r--r-- 1 admin 197121 425 Jul 27 09:39 reportWebVitals.ts # 埋点上报
-rw-r--r-- 1 admin 197121 241 Jul 27 09:39 setupTests.ts # 配置单元测试
admin@admin MINGW64 /d/www/my-app
$ ll public/ # public目录不参与打包
total 30
-rw-r--r-- 1 admin 197121 3870 Jul 27 09:39 favicon.ico
-rw-r--r-- 1 admin 197121 1721 Jul 27 09:39 index.html
-rw-r--r-- 1 admin 197121 5347 Jul 27 09:39 logo192.png
-rw-r--r-- 1 admin 197121 9664 Jul 27 09:39 logo512.png
-rw-r--r-- 1 admin 197121 492 Jul 27 09:39 manifest.json # pwa配置文件
-rw-r--r-- 1 admin 197121 67 Jul 27 09:39 robots.txt # 配置爬虫权限

安装各种包

json-server

1
yarn global add json-server  # 推荐全局安装

在项目根目录下新建目录 __json_server__,在目录下新建 db.json 文件。

package.json 中新增快捷方式:

1
2
3
4
5
6
7
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"json-server": "json-server --watch --host 0.0.0.0 --port 3001 ./__json_server__/db.json"
},

prettier

1
2
yarn add prettier --dev --exact
yarn add eslint-config-prettier --dev # 解决prettier和eslint的冲突

修改 package.json,新增”prettier”

1
2
3
4
5
6
7
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest",
"prettier"
]
},

qs

1
2
yarn add qs
yarn add @types/qs --dev # 给qs打补丁,加上类型,以适应ts的类型检查

emotion

1
yarn add @emotion/styled @emotion/react

dayjs

1
yarn add dayjs

.env 和 .env.development

npm start 的时候,调用 .envnpm run build 的时候,调用.env.development,create-react-app 会自动切换。注意:配置项一定是REACT_APP_开头。

.env 示例:

1
REACT_APP_API_URL=http://online.com

.env.development 示例:

1
REACT_APP_API_URL=http://172.16.2.1:3001

Ant Design

官网:https://ant.design/index-cn

1
yarn add antd

craco

1
2
yarn add @craco/craco
yarn add craco-less --dev

项目根目录下新建文件 craco.config.js :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const CracoLessPlugin = require("craco-less")

module.exports = {
plugins: [
{
plugin: CracoLessPlugin,
options: {
lessLoaderOptions: {
lessOptions: {
modifyVars: {
"@primary-color": "#1890ff",
"@font-size-base": "16px",
},
javascriptEnabled: true,
},
},
},
},
],
}

配置 webstrom

汉化

这里已经安装过了

配置自动 import 的绝对路径

这里应勾选了

配置 css-in-js 语法高亮

这里已经安装过了

配置自动格式化

yarn v2

以上是 yarn v1 搭配 create-react-app 构建 react,下面介绍使用 yarn v2:

  1. 全局安装 yarn v2

    1
    npm i yarn@berry -g
  2. 初始化项目:

    1
    2
    3
    4
    5
    > yarn dlx create-react-app react-ts-antd-yarn2-dev --template typescript
    ...
    ➤ YN0000: └ Completed in 2s 148ms
    ➤ YN0000: Failed with errors in 5s 116ms
    `yarnpkg add @testing-library/jest-dom@^5.14.1 @testing-library/react@^12.0.0 @testing-library/user-event@^13.2.1 @types/jest@^27.0.1 @types/node@^16.7.13 @types/react@^17.0.20 @types/react-dom@^17.0.9 typescript@^4.4.2 web-vitals@^2.1.0` failed
  3. 初始化项目:

    1
    2
    3
    4
    5
    6
    7
    8
    # 1. 进入项目目录
    > cd react-ts-antd-yarn2-dev
    # 2. 升级yarn到v3,这一步是必须的
    > yarn set version stable # 或者:yarn set version berry
    # 2. 配置npm国内源
    > yarn config set npmRegistryServer https://registry.npmmirror.com
    # 3. 初始化
    > yarn
  4. 安装必要包

    1
    2
    3
    4
    5
    > yarn add --dev @testing-library/jest-dom @testing-library/react @testing-library/user-event @types/jest @types/node @types/react @types/react-dom@ typescript
    > yarn add web-vitals

    # 精简(去掉测试包),并删除src下测试相关的文件
    > yarn add --dev typescript @types/react-dom @types/react @types/jest @types/node
  5. 项目根目录下新建 tsconfig.json 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    {
    "compilerOptions": {
    "baseUrl": "./src",
    "target": "es2015",
    "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"]
    }
  6. src 目录下新建 react-app-env.d.ts 文件,如果缺少这个文件,已组件形式引入图片会报错

    1
    /// <reference types="react-scripts" />
  7. .gitignore 中新增以下内容:

    1
    2
    3
    4
    5
    6
    7
    .yarn/*
    !.yarn/cache
    !.yarn/patches
    !.yarn/plugins
    !.yarn/releases
    !.yarn/sdks
    !.yarn/versions
  8. 启动项目

    1
    > yarn start
  9. 配置 prettier

    1
    > yarn add --dev eslint-config-prettier prettier

    项目根目录下新增 .prettierrc.js 文件

    1
    2
    3
    4
    5
    6
    7
    8
    //此处的规则供参考,其中多半其实都是默认值,可以根据个人习惯改写
    module.exports = {
    printWidth: 100, //单行长度
    tabWidth: 2, //缩进长度
    semi: false, //句末使用分号
    jsxBracketSameLinte: false,
    arrowParens: "avoid",
    }
  10. 剩下的和 yarn 一致

1
2
> yarn add @emotion/react @emotion/styled antd @ant-design/icons dayjs qs react-query react-router react-router-dom
> yarn add --dev @craco/craco craco-less @types/qs