create-react-app构建项目

本文最后更新于：2023年12月5日 晚上

全局安装 create-react-app

# 配置npm国内源
# yarn config set registry https://registry.npm.taobao.org/
yarn config set registry https://registry.npmmirror.com
npm install -g pnpm

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

初始化项目

# 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，定义忽略格式化的文件：

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

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

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

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

emotion

yarn add @emotion/styled @emotion/react

dayjs

yarn add dayjs

.env 和 .env.development

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

.env 示例：

REACT_APP_API_URL=http://online.com

.env.development 示例：

REACT_APP_API_URL=http://172.16.2.1:3001

Ant Design

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

yarn add antd

craco

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：

  1. 全局安装 yarn v2

    npm i yarn@berry -g

  2. 初始化项目：

    > 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. 进入项目目录
> 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. 安装必要包

    > 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 文件

    {
 "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 文件，如果缺少这个文件，已组件形式引入图片会报错

    /// <reference types="react-scripts" />

  7. .gitignore 中新增以下内容：

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

  8. 启动项目

    > yarn start

  9. 配置 prettier

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

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

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

  10. 剩下的和 yarn 一致

> 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
  1. …
前端 > React
#react
create-react-app构建项目
http://blog.lujinkai.cn/前端/React/create-react-app构建项目/
作者
像方便面一样的男子
发布于
2021年8月29日
更新于
2023年12月5日
许可协议