从零搭建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基本配置

 

查看更多关于从零搭建React+TypeScript的后台项目(一)的详细内容...