从零搭建React+TypeScript的后台项目(一)
<p>这段特殊时期，在家闲暇时间比较多，就系统学习了React+Ts的语法逻辑，以及如何从零搭建一个简易的后台管理项目。技术栈包括React、React-router-dom、Redux、Axios、TypeScript、Ant Design。刚好公司项目重构也是基于React+ts开发的。话不多说，直接开撸。</p><h2>一、create-react-app构建TypeScript项目</h2>
<div class="cnblogs_code">
<pre>yarn create react-app react-admin-demos --template typescript</pre>
</div>
<p>然后我们进入项目并启动</p>
<div class="cnblogs_code">
<pre>cd react-admin-demos/<span style="color: rgba(0, 0, 0, 1)">
yarn start</span></pre>
</div>
<p>项目启动成功，浏览器会默认打开http://localhost:3000/，看到官方实例就算成功了。</p>
<h2>二、引入antd并修改配置</h2>
<p>下面我们引入相应的UI框架</p>
<div class="cnblogs_code">
<pre>yarn add antd</pre>
</div>
<p>安装成功后，我们可以在项目中使用antd中组件，但是目前项目中引入了全部组件的样式，需要做按需加载。</p>
<h3>按需加载</h3>
<p>这里我们使用<strong>create-app-rewired</strong>对create-react-app 进行自定义配置，同时还需要安装<strong>customize-cra：</strong></p>
<div class="cnblogs_code">
<pre>yarn add react-app-rewired customize-cra</pre>
</div>
<p>修改package.json文件配置：</p>
<div class="cnblogs_code">
<pre>"scripts"<span style="color: rgba(0, 0, 0, 1)">: {
</span><span style="color: rgba(255, 0, 0, 1)">- <span style="background-color: rgba(255, 255, 255, 1)">"start": "react-scripts start",
</span></span><span style="color: rgba(0, 128, 0, 1)">+ "start": "react-app-rewired start",
</span><span style="color: rgba(255, 0, 0, 1)">- "build": "react-scripts build",
</span><span style="color: rgba(0, 128, 0, 1)">+ "build": "react-app-rewired build",
</span><span style="color: rgba(255, 0, 0, 1)">- "test": "react-scripts test",
</span><span style="color: rgba(0, 128, 0, 1)">+ "test": "react-app-rewired test"</span><span style="color: rgba(0, 0, 0, 1)"><span style="color: rgba(0, 128, 0, 1)">,</span>
}</span></pre>
</div>
<p>然后再安装babel-plugin-import，是一个按需加载组件和代码样式的babel插件。</p>
<div class="cnblogs_code">
<pre>yarn add babel-plugin-import</pre>
</div>
<p>安装成功后，在根目录下新建<code>config-overrides.js</code> 用于修改默认配置。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">const {
override,
fixBabelImports,
} </span>= require('customize-cra'<span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 使用ant-design搭建React+ts项目，可在此重重定义antd全局样式</span>
const overConfig=<span style="color: rgba(0, 0, 0, 1)"> override(
fixBabelImports(</span>'import'<span style="color: rgba(0, 0, 0, 1)">, {
libraryName: </span>'antd'<span style="color: rgba(0, 0, 0, 1)">,
libraryDirectory: </span>'es'<span style="color: rgba(0, 0, 0, 1)">,
style: </span><span style="color: rgba(0, 0, 255, 1)">'css'</span><span style="color: rgba(0, 0, 0, 1)">,
})
);
module.exports </span>= <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (config, env) {
</span><span style="color: rgba(0, 0, 255, 1)">return</span><span style="color: rgba(0, 0, 0, 1)"> overConfig(config, env)
}</span></pre>
</div>
<p>现在antd的组件的js和css代码都会在项目中按需加载。</p>
<h3>自定义主题</h3>
<p>自定义主题需要用到 less 变量覆盖功能。我们可以引入 <code>customize-cra</code> 中提供的 less 相关的函数 addLessLoader 来帮助加载 less 样式，同时修改 <code>config-overrides.js</code> 文件如下。</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(255, 0, 0, 1)">- const { override, fixBabelImports } = require('customize-cra');
</span><span style="color: rgba(0, 128, 0, 1)">+ const { override, fixBabelImports, addLessLoader } = require('customize-cra'</span><span style="color: rgba(0, 0, 0, 1)"><span style="color: rgba(0, 128, 0, 1)">);</span>
const overConfig</span>=<span style="color: rgba(0, 0, 0, 1)"> override(
fixBabelImports(</span>'import'<span style="color: rgba(0, 0, 0, 1)">, {
libraryName: </span>'antd'<span style="color: rgba(0, 0, 0, 1)">,
libraryDirectory: </span>'es'<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(255, 0, 0, 1)">- style: 'css',
</span><span style="color: rgba(0, 128, 0, 1)">+ style: true</span><span style="color: rgba(0, 0, 0, 1)"><span style="color: rgba(0, 128, 0, 1)">,</span>
}),
</span><span style="color: rgba(0, 128, 0, 1)">+addLessLoader({
+ javascriptEnabled: true,
+ modifyVars: { '@primary-color': '#009688' },
+</span><span style="color: rgba(0, 0, 0, 1)"><span style="color: rgba(0, 128, 0, 1)">}),</span>
);</span></pre>
</div>
<p>根据报错安装less相关模块，然后启动项目，发现antd中组件的配色方案变成我们设置的颜色。</p>
<h2>三、配置env环境及接口代理</h2>
<p>一般项目在开发过程中，本地环境、测试环境、线上环境启动和打包的域名不同，线上也要关掉本地调试logger日志。这就需要我们配置环境变量，自动化控制打包启动命令。在根目录下新建如下三个文件，可自定义变量然后在项目中使用：</p>
<p><img src="https://img2020.cnblogs.com/blog/1080099/202003/1080099-20200328152105296-1748090206.png" alt="" width="576" height="163"></p>
<div class="cnblogs_code">
<pre>HOST=0.0.0.0<span style="color: rgba(0, 0, 0, 1)">
PORT</span>=8888<span style="color: rgba(0, 0, 0, 1)">
REACT_APP_MODE</span>=development</pre>
</div>
<p>这里我们在.env.development中自定义启动端口，声明REACT_APP_MODE变量指定运行环境，作为逻辑判断。</p>
<h3>接口代理</h3>
<p>在React中我们使用http-proxy-middleware来解决接口代理的问题</p>
<div class="cnblogs_code">
<pre>yarn add http-proxy-middleware</pre>
</div>
<p>然后在src下新建setupProxy.js文件，注意这里不能是ts文件，否则无法识别：</p>
<div class="cnblogs_code">
<pre>const proxy = require('http-proxy-middleware'<span style="color: rgba(0, 0, 0, 1)">);
module.exports </span>= <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (app) {
app.use(proxy(</span>'/public'<span style="color: rgba(0, 0, 0, 1)">, {
target:yourHost,
secure: </span><span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
changeOrigin: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
pathRewrite: {
</span>"^/public": "/"<span style="color: rgba(0, 0, 0, 1)">
}
}))
}</span></pre>
</div>
<p>配置成功后，前端发送的请求就会被代理到文件中配置的host域名下。</p>
<p>到现在为止，一个React+Ts+Ant Design+proxy的简易框架就搭建完毕，下面的章节会讲解如何将Route、Redux状态管理以及Ts语法的常规写法集成到项目中！</p>
<p>官方文档地址：在TypeScript中使用Ant Design</p>
<p>这是一个系列文章：</p>
<p>从零搭建React+TypeScript的后台项目(一)--构建基础React+TypeScript项目</p>
<p>从零搭建React+TypeScript的后台项目(二)--后台router实现方案</p>
<p>从零搭建React+TypeScript的后台项目(三)--Redux基本配置</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/lodadssd/p/12587694.html
頁:
[1]