调整项目结构

添加@types

根目录添加上typescript 的全局类型定义文件架 @types

src 里面添加结构

assets、components、constants、layouts、utils、style、pages、hooks等

调整后的文件目录结构为：

my-app
├── .vscode          # vscode 配置目录
│   ├── extensions.json  #项目推荐使用安装的插件
│   ├── settings.json    #项目里面使用的vscode的配置内容，比如自动保存代码格式化等
│   ├── common.code-snippets #代码片段配置
├── .@types          # 全局类型声明
├── node_modules 
├── public           # 公共文件
│   ├── favicon.ico
│   ├── index.html     #入口html
│   └── manifest.json
└── src             # 源码目录
│  ├── assets        # 静态资源
│  ├── components    # 公共业务组件
│  ├── constants     # 存储api 等公共的类型常量类的变动不大的文件
│  │     │── api       # 定义对接后台api 接口的文件
│  ├── layouts       # 布局
│  ├── models          # 存放state和actions模块
│  ├── pages           # 页面组件目录
│  ├── routers         # 页面路由相关的文件
│  ├── services        # model对应的api 调用函数
│  ├── style           # 全局样式
│  ├── utils           # 公用工具函数
│  ├── App.css
│  ├── App.js
│  ├── App.test.tsx
│  ├── index.css
│  ├── index.tsx
│   ├── logo.svg
│  └── reportWebVitals.ts
│  └── setupTests.ts
├── .eslintignore        # eslint忽略文件的配置
├── .eslintrc            #eslint 的配置文件
├── .gitignore           #git 的忽略文件的配置
├── .prettierrc          #prettier 插件的配置
├── .stylelintrc.json    #stylelint插件的配置
├── package.json        
├── README.md            
├── tsconfig.json        #typescript 的配置
├── yarn.lock            #yarn lock 文件

引入ant-design

安装antd 推荐的craco 模块

yarn add antd @craco/craco

修改package.json 里面的启动指令

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

根目录里面添加craco.config.js

craco.config.js,主要是在create-react-app 不用eject暴露webpack 配置的情况下，方便在外部修改webpack 的配置

/* craco.config.js */
module.exports = {
  // ...
};

自定义主题

/* src/App.js */
- import './App.css';
+ import './App.less';

/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';

安装 craco-less

yarn add craco-less

修改 craco.config.js 文件如下

+ const CracoLessPlugin = require('craco-less');

+ module.exports = {
      plugins: [
        {
          plugin: CracoLessPlugin,
          options: {
            lessLoaderOptions: {
              lessOptions: {
                modifyVars: { '@primary-color': '#1DA57A' },
                javascriptEnabled: true,
              },
            },
          },
        },
      ],
   };

支持装饰器

yarn add @babel/plugin-proposal-decorators --dev

修改 craco.config.js 文件如下

babel:{  
    plugins: [
      ["@babel/plugin-proposal-decorators", { legacy: true }]
    ]
 },

配置代理

修改 craco.config.js 文件如下

//配置代理解决跨域
devServer: {
    proxy: {
         "/api": {
             target: "http://baidu.com",  
             //target: 'http://192.168.9.19:8080',
             changeOrigin: true,
             pathRewrite: {
                 "^/api": ""
             }
         }
     }
 }

配置antd的less按需加载

yarn add babel-plugin-import

修改 craco.config.js 文件如下

babel:{  
    plugins: [
      ["@babel/plugin-proposal-decorators", { legacy: true }],  //装饰器
      [   
        "import", 
        {
          "libraryName": "antd",
          "libraryDirectory": "es",
           "style": true //设置为true即是less
         }
     ]
    ]
 },

App.less文件去掉@import '~antd/dist/antd.less';

按需加载后只需引入组件，无需再额外引入样式文件，babel会自动按需帮你完成样式的引入。这样打包出来的文件会更小。

配置别名

目的：让后续引用的地方减少路径的复杂度

修改 craco.config.js 文件如下

const path = require('path');
webpack: {
    // 别名
    alias: {
      "@": path.resolve("src"),
      "@utils": path.resolve("src/utils"),
    }
  },

添加antd 和ant 国际化

yarn add antd

index.tsx添加国际语言包

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import zhCN from 'antd/lib/locale/zh_CN';//添加语言包支撑
ReactDOM.render(
  <React.StrictMode>
      <App />
  </React.StrictMode>,
  document.getElementById('root'),
);

index.tsx为组件提供统一的全局化配置

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import zhCN from 'antd/lib/locale/zh_CN'; // 添加语言包支撑
import { ConfigProvider } from 'antd'; // 为组件提供统一的全局化配置
ReactDOM.render(
  <React.StrictMode>
    <ConfigProvider locale={zhCN}>
      <App />
    </ConfigProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);