react+ts+ant+proxy+less+axios封装+全局loading和一些常用封装

1. 初始化项目

npx create-react-app <projectname> --template typescript

2. 目录简介

node_modules
public // 不参与文件打包，存放静态文件
  favicon.ico
  index.html
  logo192.png
  logo512.png
  manifest.json // 配置pwa的，不用管
  robots.txt // 搜索引擎怎么对待项目的一些配置：Disallow：/user，不允许搜索引擎访问user下面的内容，为空则允许全部访问
src
  App.css
  App.test.tsx
  App.tsx // 描述App的本身
  index.css
  index.tsx // 入口文件，做一些准备工作
  logo.svg
  react-app-env.d.ts // 预先引入一些定义好的ts的类型，先不用管
  reportWebVitals.ts // 做一些埋点上报，不用管
  setupTests.ts // 配置单元测试，可以引入自己的测试裤，eg：testing-library
.gitignore
package.json
README.md // 对本项目的一些说明
tsconfig.json // ts的一些配置
yarn.lock // 锁定精确的版本号

3. 在根目录tsconfig.json配置相对路径，方便在组件中引入src下的其他一些资源（此步骤可忽略）

在 compilerOptions 中添加 "baseUrl": "./src", 与target同级

4. 如果团队开发建议安装prettier代码格式和eslint校验 可忽略

1. yarn add --dev --exact prettier

2. echo {}> .prettierrc.json

3. 新建一个` .prettierignore`文件 //不需要被格式化的文件
   文件内容为：
   build
   coverage
   
4. npx mrm lint-staged // 每次提交代码前自动格式化代码

5. 在package.json文件中找到"lint-staged"，添加匹配项`ts`和`tsx`
   "*.{js,css,md,ts,tsx}": "prettier --write"

注：prettier和eslint工作的时候会有一些冲突，所以需要为了eslint单独配置一下

6. yarn add eslint-config-prettier
   在package.json中找到'eslintConfig',在extends中添加"prettier" 
   //prettier会覆盖一下eslint的配置，使双方能共同工作 

7. 还可以配置一个commitlint，规范提交内容，具体不再赘述，自行尝试

8. yarn add tslint-eslint-rules --dev  // 安装tslint规则校验

在package.json -> "scripts"对象中添加 "lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'"
在根目录中添加文件tslint.json文件，具体配置内容根据项目来，请参考官方
https://github.com/buzinas/tslint-eslint-rules


-----到此配置结束，可以在组件中添加空行，然后git提交一下，做一下格式对比----

5. 引入ant，这里是全局引入，如按需引入请参照ant官网有详细步骤说明，在此不再详细赘述

安装：    yarn add antd
样式引入： import 'antd/dist/antd.css';

主题配置：'yarn eject' 之后 在 webpack.config.js -> getStyleLoaders 函数中的合适位置添加

'modifyVars: theme,',theme是一个js文件其内容为

module.exports = {
  "@border-radius-base": "2px",
  "@error-color": "#e2c286",
  "@input-placeholder-color": "#C7C5C5",
  "@primary-color": "#e2c286",
};

小插曲：可能有些小伙伴的App.tsx引入的svg在页面上出不来，这里有两种解决方法

1. 引入的logo是个module，图片的地址在default属性中，不能直接使用
   const logo = require('@/logo.svg');
<img src={logo.default} className="App-logo" alt="logo" />

2. 在config配置文件中找到url-loader，添加esModule: false, 重启即可

6. 暴露webpack配置文件 此过程不可逆

yarn run eject     
// 如果报错This git repository has untracked files or uncommitted changes:
// git提交一下，再次执行一遍即可

7. 安装less

yarn add less less-loader@^5.0.0

// 在webpack.config.js中添加配置项，复制一份sass配置，修改为lessRegex和lessModuleRegex即可
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;


//less-loader 默认是不支持js语法的， 需要手动开启，所以需要在webpack.config.js中添加配置项
javascriptEnabled: true 

8. 配置@路径 可忽略

1. 在 tsconfig.json 文件中 'compilerOptions' 对象中添加   "paths": {"@/*": ["./src/*"]},
2. webpack.config.js 文件中搜索关键字'alias',在相应的位置添加 路径配置 ，比如
   "@": '../src',
   "@style": '../src/assets/style',
   "@until": '../src/assets/until',

9. 配置全局常量，通常用于环境的区分

在webpack中配置全局常量是在'plugins'中添加 
new webpack.DefinePlugin({
	"process.env.NODE_ENV": JSON.stringify("production"),
}),
在'create-react-app'项目中，'yarn eject'之后
只需要在config -> env.js -> getClientEnvironment 函数中添加(以上为例)'NODE_ENV': JSON.stringify("production")

如果需要区分多个环境配置，请参考cross-env官网

10. 配置本地代理

1. 官方推荐是在package.json中使用proxy
 
   由于package.json中，只能给proxy设置字符串；因此，这样的方式就导致，设置的代理只能配置一个，想要配置多个代理就不行了。
  
  "proxy": "http://172.18.22:8080"
  
2. 可通过中间件
   
   yarn add http-proxy-middleware --save
   
   在'src'目录下新建文件'setupProxy.js'文件, 重启即可！
  
   const { createProxyMiddleware: proxy } = require('http-proxy-middleware')
   module.exports = app => {
	  app.use('/api', proxy({
	    target: 'http://localhost',
	    changeOrigin: true,
	    pathRewrite: {
	      '^/api': ''
	    }
	  }))
    }

11. 内容太长，下一篇吧～ react+ts环境 axios封装和全局loading