从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列（基础篇）

最近因为要做一个新的管理后台项目，新公司大部分是用vue写的，技术栈这块也是想切到react上面来，所以，这次从0到1重新搭建一个react项目架子，需要考虑的东西的很多，包括目录结构、代码规范、请求封装等等，
涉及内容较多，所以我分成了几个部分来记录搭建的过程：

从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列（基础篇）

从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列（引入redux）

从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列（菜单路由）

从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列（权限）

项目我已经上传到github，有需要的可以自取，记得star哦！也欢迎大家在上面提issue~

react-antd-adminMT

项目初始化

通过create-react-app并使用typescript模板创建项目

yarn create react-app react-antd-adminMT --template typescript

目录结构调整

为了便于开发和管理代码，我们在src下创建components、navigation、pages、redux、services、utils子文件夹

├── LICENSE ├── README.md ├── build ├── mock ---本地mock服务 │   ├── server.js │   └── test.js ├── package.json ├── public ├── src │   ├── components ---组件 │   ├── config ---配置文件 │   ├── index.css │   ├── index.tsx │   ├── navigation ---路由导航 │   ├── pages ---页面组件 │   ├── redux │   ├── services ---接口文件 │   ├── setupProxy.js │   ├── setupTests.ts │   └── utils ---工具相关 ├── tsconfig.json └── yarn.lock 多环境打包配置

例如我们需要配置多个不同的环境，加载不同的变量

.env.development .env.staging .env.production

每个文件里面对应不同的变量值

PORT=3000 REACT_APP_ENV=staging REACT_APP_BASE_URL=https://www.zhihu.com

打包时加载不同环境变量文件

两种方式：

env-cmd

dotenv-cli

"scripts": { "dev": "env-cmd -f .env.development react-scripts start", "dev:stg": "env-cmd -f .env.staging react-scripts start", "build": "react-scripts build", "build:stg": "env-cmd -f .env.staging yarn build", "build:prod": "env-cmd -f .env.production yarn build", "test": "react-scripts test", "eject": "react-scripts eject" },

这里我使用的是env-cmd，通过在脚本命令配置env-cmd -f .env.development，这样我们就可以再执行yarn dev的时候加载.env.development文件里面的变量，类似，每个不同环境打包加载对应不同的环境变量

配置代码规范 prettier配合eslint

eslint主要用于语法校验，prettier保持风格统一

安装相关包

$ yarn add C eslint-plugin-prettier eslint-config-prettier --dev

上面安装包中eslint、 prettier肯定是必不可少的。eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查，eslint-config-prettier插件可以关闭一些不必要的或者与prettier冲突的lint选项
​

在根目录下创建.eslintrc.js文件

module.exports = { root: true, parserOptions: { ecmaFeatures: { jsx: true } }, env: { browser: true, es6: true }, extends: ['react-app', 'plugin:prettier/recommended'], plugins: ['prettier'], rules: { 'prettier/prettier': 'error', 'react-hooks/rules-of-hooks': 'error', 'react-hooks/exhaustive-deps': 'off' } }

​

eslint配置项有很多，例如：
Parser、parserOptions、Environments、Globals、Plugins、extends、Rules
​

详情可以查看eslint手册 https://eslint.bootcss.com/docs/user-guide/configuring

这里主要介绍下extends、plugins和rules选项

extends

一个配置文件可以从基础配置中继承已启用的规则。extends 里面可以引入 共享配置包，可以引入 插件

可共享的配置

可共享的配置 是一个 npm 包，它输出一个配置对象。extends 属性值可以省略包名的前缀 eslint-config-。

插件

插件 是一个 npm 包，通常输出规则。plugins 属性值 可以省略包名的前缀 eslint-plugin-。

extends 属性值可以由以下组成：

（1）、plugin: （2）、包名 (省略了前缀，比如，react) （3）、/ （4）、配置名称 (比如 recommended)
例如：extends: ['react-app', 'plugin:prettier/recommended']

plugins

ESLint 支持使用第三方插件。在使用插件之前，你必须使用包管理工具安装它，插件名称可以省略 eslint-plugin- 前缀

rules

ESLint 附带有大量的规则，可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为off、warn、error三者之一。
​

​

根目录下创建.prettierrc.js文件

module.exports = { semi: false, // 句末加分号 singleQuote: true, // 用单引号 printWidth: 80, // 换行字符串阈值 jsxSingleQuote: true, // 在jsx中使用单引号代替双引号 trailingComma: 'none', // 最后一个对象元素加逗号 arrowParens: 'avoid' // (x) => {} 是否要有小括号 }

上面将eslint和prettier配置完了之后，但是要能够自动格式化，那么我们还需要做一些集成。例如，在修改代码保存后，能够自动格式化代码