creact-react-app配置

• 基于create-react-app 配置的一系列工具，需要可以去下载 https://github.com/sili-li/web-starter，下载可直接快速进行开发
• 配置：typscript+husky+ prettier + router + css module + axios
• github： git clone https://github.com/sili-li/web-starter.git

1. 新建项目web_starter：create-react-app web_starter
2. 使用react-app-rewired覆盖webpack配置
   • yarn add react-app-rewired
   • 添加config.overides.js文件

//把package.json的script里面的creact-react-app改为react-app-rewired
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  },

3. 引入typescript
   • yarn add --dev typescript
   • yarn add --dev @types/react @types/react-dom
   • 配置tsconfig.json typeScript官方文档
   • 把对应的js文件改为.ts,.tsx文件

// tsconfig.json这个我常用的一些配置，详细可以点击上方的官方文档了解
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true, 
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

4. 引入tslint，使代码规范化
   • yarn add --dev tslint tslint-config-prettier tslint-eslint-rules tslint-react
   • yarn add --dev lint-staged husky prettier
   • 添加tslint.json文件

//tslint.json文件
{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended",
    "tslint-eslint-rules",
    "tslint-react",
    "tslint-config-prettier"
  ],
  "linterOptions": {
    "exclude": [
      "src/serviceWorker.ts",
      "src/react-app-env.d.ts"
    ]
  },
  "jsRules": {},
  "rules": {
    "quotemark": [true, "single", "allow-escape", "avoid-template", "jsx-double"],
    "import-name": false,
    "ordered-imports": true,
    "member-ordering": false,
    "ban-types": false,
    "no-string-literal": false,
    "object-literal-sort-keys": false,
    "max-classes-per-file": false,
    "interface-over-type-literal": false,
    "no-empty": false,
    "interface-name": false,
    "no-unused-expression": false,
    "jsx-no-lambda": false
  },
  "rulesDirectory": []
}
// package.json里面添加"husky": "^4.2.5",  "lint-staged":"^10.2.9",
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json}": [
      "yarn lint",
      "prettier --write",
      "git add"
    ]
  },

5. 配置react-router
   • yarn add react-router-dom react-router-cache-route
   • yarn add --dev @types/react-router-dom

// router页面
import React from 'react';

import CacheRoute, { CacheSwitch } from 'react-router-cache-route';
import { BrowserRouter, Redirect, Route } from 'react-router-dom';
import Home from './pages/home/index';
import Test from './pages/test/index';

export interface RouteType {
  routerPath: string;
  title: string;
  component: React.ComponentType;
  cache?: boolean; // 为true时，缓存页面，返回上一页的时候，
  // 上一页的滚动条、动作状态等等和离开这个页面时的状态保持一致。
}

const routeConfigs: RouteType[] = [
  {
    routerPath: '',
    title: '首页',
    component: Home,
  },
  {
    routerPath: 'test',
    title: '测试页面',
    component: Test,
  },
];

function AppRouter() {
  return (
    <BrowserRouter>
      <CacheSwitch>
        {routeConfigs.map((route: RouteType, index: number) => {
          return route.cache ? (
            <CacheRoute exact={true} path={`${route.routerPath}`} key={index} component={route.component} />
          ) : (
            <Route exact={true} path={`/${route.routerPath}`} key={index} component={route.component} />
          );
        })}
        <Redirect to="/" />
      </CacheSwitch>
    </BrowserRouter>
  );
}

export default AppRouter;

6. css module
   • yarn add --dev customize-cra postcss-normalize postcss-preset-env babel-plugin-import
   • config.overides.js

const { override, addPostcssPlugins, fixBabelImports } = require('customize-cra');
// 关掉 sourceMap
process.env.GENERATE_SOURCEMAP = process.env.NODE_ENV === 'development' ? 'true' : 'false';

module.exports = override(
  addPostcssPlugins([
    require('postcss-normalize')({
      forceImport: true,
    }),
    require('postcss-preset-env')({
      stage: 0,
    }),
  ]),
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  })
);

7. axios
   • yarn add axios

import axios from 'axios';
import pg from '../../package.json';

const Api = axios.create({
  baseURL: `${pg.proxy}/api`,
  timeout: 20000,
  headers: {},
});

const getHeader = () => ({
  Authorization: 'token',
});

Api.interceptors.request.use((config) => {
  config.headers = { ...getHeader(), ...config.headers };
  return config;
});

Api.interceptors.response.use(
  (response) => response,
  (error) => {
    return Promise.reject(error); // 返回接口返回的错误信息
  }
);

export default Api;