从零搭建React+TypeScript的后台项目(一)

这段特殊时期，在家闲暇时间比较多，就系统学习了React+Ts的语法逻辑，以及如何从零搭建一个简易的后台管理项目。技术栈包括React、React-router-dom、Redux、Axios、TypeScript、Ant Design。刚好公司项目重构也是基于React+ts开发的。话不多说，直接开撸。

一、create-react-app构建TypeScript项目

yarn create react-app react-admin-demos --template typescript

然后我们进入项目并启动

cd react-admin-demos/
yarn start

项目启动成功，浏览器会默认打开http://localhost:3000/，看到官方实例就算成功了。

二、引入antd并修改配置

下面我们引入相应的UI框架

yarn add antd

安装成功后，我们可以在项目中使用antd中组件，但是目前项目中引入了全部组件的样式，需要做按需加载。

按需加载

这里我们使用create-app-rewired对create-react-app 进行自定义配置，同时还需要安装customize-cra：

yarn add react-app-rewired customize-cra

修改package.json文件配置：

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

然后再安装babel-plugin-import，是一个按需加载组件和代码样式的babel插件。

yarn add babel-plugin-import

安装成功后，在根目录下新建config-overrides.js 用于修改默认配置。

const { 
    override, 
    fixBabelImports,
} = require('customize-cra');

// 使用ant-design搭建React+ts项目，可在此重重定义antd全局样式
const overConfig  = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: 'css',
    })
);

module.exports = function (config, env) {
    return overConfig(config, env)
}

现在antd的组件的js和css代码都会在项目中按需加载。

自定义主题

自定义主题需要用到 less 变量覆盖功能。我们可以引入 customize-cra 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式，同时修改 config-overrides.js 文件如下。

- const { override, fixBabelImports } = require('customize-cra');
+ const { override, fixBabelImports, addLessLoader } = require('customize-cra');

const overConfig  = override(
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
-       style: 'css',
+      style: true,
    }),
+  addLessLoader({
+     javascriptEnabled: true,
+     modifyVars: { '@primary-color': '#009688' },
+  }),
);

根据报错安装less相关模块，然后启动项目，发现antd中组件的配色方案变成我们设置的颜色。

三、配置env环境及接口代理

一般项目在开发过程中，本地环境、测试环境、线上环境启动和打包的域名不同，线上也要关掉本地调试logger日志。这就需要我们配置环境变量，自动化控制打包启动命令。在根目录下新建如下三个文件，可自定义变量然后在项目中使用：

HOST=0.0.0.0
PORT=8888
REACT_APP_MODE=development

这里我们在.env.development中自定义启动端口，声明REACT_APP_MODE变量指定运行环境，作为逻辑判断。

接口代理

在React中我们使用http-proxy-middleware来解决接口代理的问题

yarn add http-proxy-middleware

然后在src下新建setupProxy.js文件，注意这里不能是ts文件，否则无法识别：

const proxy = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(proxy('/public', {
    target:yourHost,
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      "^/public": "/"
    }
  }))
}

配置成功后，前端发送的请求就会被代理到文件中配置的host域名下。

到现在为止，一个React+Ts+Ant Design+proxy的简易框架就搭建完毕，下面的章节会讲解如何将Route、Redux状态管理以及Ts语法的常规写法集成到项目中！

官方文档地址：在TypeScript中使用Ant Design

这是一个系列文章：

从零搭建React+TypeScript的后台项目(一)--构建基础React+TypeScript项目

从零搭建React+TypeScript的后台项目(二)--后台router实现方案

从零搭建React+TypeScript的后台项目(三)--Redux基本配置