create-react-app构建项目

发表于 2021-08-29 更新于 2023-05-29 分类于前端， React

全局安装 create-react-app

# 配置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

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 配置项

{
 "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 ，定义格式化规则：

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

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

1 2	build coverage

主要文件介绍

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 中新增快捷方式：

"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”

"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 的时候，调用 .env，npm 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 ：

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：

全局安装 yarn v2
1
npm i yarn@berry -g

初始化项目：

> 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

初始化项目：

# 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

安装必要包

> 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

项目根目录下新建 tsconfig.json 文件

{
 "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"]
}

src 目录下新建 react-app-env.d.ts 文件，如果缺少这个文件，已组件形式引入图片会报错
1
/// <reference types="react-scripts" />

.gitignore 中新增以下内容：

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

启动项目
1
> yarn start

配置 prettier

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

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

//此处的规则供参考，其中多半其实都是默认值，可以根据个人习惯改写
module.exports = {
 printWidth: 100, //单行长度
 tabWidth: 2, //缩进长度
 semi: false, //句末使用分号
 jsxBracketSameLinte: false,
 arrowParens: "avoid",
}

剩下的和 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