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

打开VScode的配置文件，添加如下配置

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

husky，是一个git hooks工具，它可以再我们代码commit或push的时候做一些事情，以保证我们提交的代码是符合规范的
​

安装husky

$ yarn add husky --dev

在package.json中设置我们需要的git hooks

"husky": { "hooks": { "pre-commit": "lint-staged",//commit前检查暂存区文件进行规则校验 "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",//校验commit时添加的备注信息是否符合我们要求的规范 } },

这里我们需要下面安装几个包

$ 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支持以下类型：

build：主要目的是修改项目构建系统(例如 glup，webpack，rollup 的配置等)的提交

ci：主要目的是修改项目继续集成流程(例如 Travis，Jenkins，GitLab CI，Circle等)的提交

docs：文档更新

feat：新增功能

fix：bug 修复

perf：性能优化

refactor：重构代码(既没有新增功能，也没有修复 bug)

style：不影响程序逻辑的代码修改(修改空白字符，补全缺失的分号等)

test：新增测试用例或是更新现有测试

revert：回滚某个更早之前的提交

chore：不属于以上类型的其他类型(日常事务)

例如：

$ git commit -m 'feat: 新增xxx功能' $ git commit -m 'fix: 修复xxxbug'

如果不符合以上支持type的规范，提交的时候会报错
​

​

​

​

根目录下新建.lintstagedrc.js文件

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'] }

根目录下新建.commitlintrc.json文件

{ "extends": [ "@commitlint/config-conventional" ] }

最后，需要注意的是，配置好了husky之后commit不生效，发现是husky 6.0版本做了破坏性的更新，这里我们通过移除husky包并添加低版本的方式来解决

$ yarn remove husky $ yarn add husky@4.3.8 -D Http请求封装

新一个apiClient.js文件用来配置axios，最后返回axios实例

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

引入apiClient并调用axios的请求方法

import apiClient from './apiClient' export const getContractList = () => apiClient.get(`/api/v4/search/top_search`)

get、post传参形式

这里需要注意一点是，get和post传参形式有点区别，get请求传参需要带上params字段

//get请求 axios.get('/user', { params: { ID: 12345 } }) // post请求 axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) 本地跨域请求

在src目录下创建setupProxy.js文件配置代理接口，这样我们在请求带有/proxy-api接口的时候，就能代理到:3001服务上，从而解决跨域的问题

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 } }) ) } 搭建本地Mock服务