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