标签：有图 接口技术 yarn react 周锋版 eslint env husky prettier
这份答案中包含了周锋版《微机原理与接口技术》第2至第8章答案，补全了此前网上流传版本缺少第8章答案的不足。第7、8章都是我完全原创的，一个个字手敲上去的，图也是用画图软件画的。某些章节的答案后面，附加了所用的知识点，便于进行期末复习。
文件：590m.com/f/25127180-500693790-50914c（访问密码：551685）
以下内容无关：
-------------------------------------------分割线---------------------------------------------
最近因为要做一个新的管理后台项目，新公司大部分是用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配置完了之后，但是要能够自动格式化，那么我们还需要做一些集成。例如，在修改代码保存后，能够自动格式化代码
打开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实例
标签：有图,接口技术,yarn,react,周锋版,eslint,env,husky,prettier 来源： https://blog.csdn.net/weixin_43322764/article/details/118280253
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。