大佬教程收集整理的这篇文章主要介绍了从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇),大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
最近因为要做一个新的管理后台项目,新公司大部分是用vue写的,技术栈这块也是想切到react上面来,所以,这次从0到1重新搭建一个react项目架子,需要考虑的东西的很多,包括目录结构、代码规范、请求封装等等, 涉及内容较多,所以我分成了几个部分来记录搭建的过程:
项目我已经上传到github,有需要的可以自取,记得star哦!也欢迎大家在上面提issue~
@H_450_29@yarn create react-app react-antd-adminMT --template typescript
为了便于开发和管理代码,我们在src下创建components、navigation、pages、redux、services、utils子文件夹
@H_450_29@├── 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
例如我们需要配置多个不同的环境,加载不同的变量
@H_450_29@.env.development .env.staging .env.production
每个文件里面对应不同的变量值
@H_450_29@PORT=3000 REACT_APP_ENV=staging REACT_APP_BASE_URL=https://www.zhihu.com
打包时加载不同环境变量文件
两种方式:
@H_450_29@"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文件里面的变量,类似,每个不同环境打包加载对应不同的环境变量
eslint主要用于语法校验,prettier保持风格统一
@H_450_29@$ yarn add C eslint-plugin-prettier eslint-config-prettier --dev
上面安装包中eslint、 prettier肯定是必不可少的。eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查,eslint-config-prettier插件可以关闭一些不必要的或者与prettier冲突的lint选项
@H_450_29@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 里面可以引入 共享配置包,可以引入 插件
可共享的配置 是一个 npm 包,它输出一个配置对象。extends 属性值可以省略包名的前缀 eslint-config-。
插件 是一个 npm 包,通常输出规则。plugins 属性值 可以省略包名的前缀 eslint-plugin-。
(1)、plugin: (2)、包名 (省略了前缀,比如,react) (3)、/ (4)、配置名称 (比如 recommended) 例如:extends: ['react-app', 'plugin:prettier/recommended']
ESLint 支持使用第三方插件。在使用插件之前,你必须使用包管理工具安装它,插件名称可以省略 eslint-plugin- 前缀
ESLint 附带有大量的规则,可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置,你必须将规则 ID 设置为off、warn、error三者之一。
@H_450_29@module.exports = { semi: false, // 句末加分号 singleQuote: true, // 用单引号 printWidth: 80, // 换行字符串阈值 jsxSingleQuote: true, // 在jsx中使用单引号代替双引号 TrailingComma: 'none', // 最后一个对象元素加逗号 arrowParens: 'avoid' // (X) => {} 是否要有小括号 }
打开VScode的配置文件,添加如下配置
@H_450_29@{ "eslint.alwaysShowStatus": true, "editor.formatOnSave": true, "[javascript]": { "editor.formatOnSave": false }, "[html]": { "editor.formatOnSave": false }, "editor.formatOnPaste": false, "editor.tabSize": 2, "javascript.updateImportsOnFileMove.enabled": "never", "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }
上面添加配置因为是全局的,为了能够在团队开发时统一,我们也可以为项目单独配置,在项目根目录下创建.vscode文件夹并新建setTings.json文件,然后将上面内容拷贝进去
husky,是一个git hooks工具,它可以再我们代码commit或push的时候做一些事情,以保证我们提交的代码是符合规范的
@H_450_29@$ yarn add husky --dev
@H_450_29@"husky": { "hooks": { "pre-commit": "lint-staged",//commit前检查暂存区文件进行规则校验 "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",//校验commit时添加的备注信息是否符合我们要求的规范 } },
这里我们需要下面安装几个包
@H_450_29@$ yarn add @commitlint/cli @commitlint/config-conventional lint-staged eslint-plugin-simple-import-sort -D
lint-staged,在代码提交之前,进行代码规则检查能够确保进入git库的代码都是符合代码规则的,如果在整个项目上运行lint速度会很慢,lint-staged能够让lint只检测暂存区的文件,速度很快。
@commitlint/cli @commitlint/config-conventional,这两个主要是用来规范代码提交的信息
type支持以下类型:
例如:
@H_450_29@$ git commit -m 'feat: 新增xxx功能' $ git commit -m 'fix: 修复xxxbug'
如果不符合以上支持type的规范,提交的时候会报错
@H_450_29@module.exports = { '**/*.{js,jsx,ts,tsx}': [ 'prettier --write', 'eslint --fix --plugin=simple-import-sort --rule=simple-import-sort/imports:error', 'git add' ], '**/*.{json,md,mdx,css,html,yml,yaml,scss}': ['prettier --write', 'git add'] }
@H_450_29@{ "extends": [ "@commitlint/config-conventional" ] }
@H_450_29@$ yarn remove husky $ yarn add husky@4.3.8 -D
@H_450_29@import axios from 'axios' const baseURL = process.env.REACT_APP_BASE_URL const instance = axios.create({ baseURL, timeout: 15000 }) // Add a request interceptor instance.interceptors.request.use( function (config) { // Do something before request is sent return config }, function (error) { // Do something with request error return Promise.reject(error) } ) // Add a responsE interceptor instance.interceptors.response.use( function (responsE) { // Any status code that lie within the range of 2xx cause this function to trigger // Do something with response data return response }, function (error) { // Any status codes that falls outside the range of 2xx cause this function to trigger // Do something with response error return Promise.reject(error) } ) export default instance
@H_450_29@import apiClient from './apiClient' export const getContractList = () => apiClient.get(`/api/v4/search/top_search`)
这里需要注意一点是,get和post传参形式有点区别,get请求传参需要带上params字段
@H_450_29@//get请求 axios.get('/user', { params: { ID: 12345 } }) // post请求 axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' })
在src目录下创建setupProxy.js文件配置代理接口,这样我们在请求带有/proxy-api接口的时候,就能代理到http://localhost:3001服务上,从而解决跨域的问题
@H_450_29@const { createProxymiddleware } = require('http-proxy-middleware') module.exports = function (app) { app.use( '/proxy-api', createProxymiddleware({ target: 'http://localhost:3001', changeOrigin: true, secure: false, pathRewrite: { '^/proxy-api': '' // 请求中去除/api } }) ) }
@H_450_29@const express = require('express') const app = express() const port = 3001 app.use(express.json()) app.use(expresS.Urlencoded({ extended: false })) app.get('/', (req, res) => { res.send('Hello World!') }) // 加载路由 app.use('/api', require('./test')) app.listen(port, () => { console.log(`mock server listening at http://localhost:${port}`) })
@H_450_29@var express = require('express') var router = express.Router() // http://mockjs.com/ var mock = require('mockjs') router.get('/Hello', function (req, res) { res.json({ user: 'Hello' }) }) router.get('/mock', function (req, res) { console.log(req.body) var data = mock.mock({ top_search: { 'words|10': [ { query: '一人之下', display_query: '《一人之下》565' } ] } }) return res.json(data) }) module.exports = router
@H_450_29@"scripts": { "mock": "nodemon ./mock/server.js", },
我们在scripts下添加一个mock脚本命令,执行yarn mock就能开启mock服务,例如访问上面接口http://localhost:3001/api/mock
本文作者阿健Kerry,高级前端工程师,转载请注明出处。如果觉得本文对你有帮助,记得点赞三连哦,也可以扫码关注我新建立的前端技术公众号【有你前端】,之后我所有文章会同步发到这个公众号上面。另外,我建了一个可以帮助咱们程序员脱单的公众号,每周都会推送几个优秀的单身小姐姐,如果你是程序员技术好又正好是单身,那你可以下面扫码关注【缘来你是程序猿】公众号开启你的脱单之旅。
以上是大佬教程为你收集整理的从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇)全部内容,希望文章能够帮你解决从0到1用react+antd+redux搭建一个开箱即用的企业级管理后台系列(基础篇)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。