create-react-app构建项目

全局安装 create-react-app

# npm 方式
npm install -g create-react-app
# 如果很久之前安装过,建议卸载重新安装 npm uninstall -g create-react-app

初始化项目

npx 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
$

主要文件介绍

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

npm install json-server -g		# 推荐全局安装

在项目根目录下新建目录 __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

npm install --save-dev --save-exact prettier
npm install eslint-config-prettier -D			# 解决prettier和eslint的冲突

修改 package.json,新增”prettier”

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

qs

npm i qs -S
npm i @types/qs -D		# 给qs打补丁,加上类型,以适应ts的类型检查

emotion

npm i @emotion/styled @emotion/react -S

dayjs

npm i dayjs -S

.env 和 .env.development

npm start 的时候,调用 .envnpm 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

craco

npm i @craco/craco -S
npm i craco-less -D

项目根目录下新建文件 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 语法高亮

这里已经安装过了