什么是 @umijs/preset-react
@umijs/preset-react 是一款针对 React 应用开发和构建的工具，它基于 umijs 脚手架进行开发。
使用 @umijs/preset-react 可以快速地创建一个项目，并且默认进行了各种常用的配置和优化。
安装 @umijs/preset-react
在安装 @umijs/preset-react 之前，需要先安装 umijs 脚手架。如果您还没有安装 umijs，可以使用以下命令进行安装：
npm install -g umi
安装完成后，您可以在命令行输入 umi，如果出现以下信息，说明 umi 安装成功：
-- -------------------- ---- -------
- ---
---
-----
- --- ---------
--------
--- ---------
----- ------
---- ------
---接着，使用以下命令进行 @umijs/preset-react 的安装：
npm install --save-dev @umijs/preset-react
如何使用 @umijs/preset-react
@umijs/preset-react 安装完成后，我们需要在项目的配置文件中进行使用。
在项目根目录下创建一个名为 .umirc.ts 的文件，文件中需要进行以下配置：
export default {
presets: [
require.resolve('@umijs/preset-react'),
],
}配置完成后，您就可以愉快的开始项目的开发和构建了！
常用配置
@umijs/preset-react 中提供了很多常用的配置，下面我们来一个一个地了解一下。
CSS 预处理器
在开发中需要使用 CSS 预处理器的情况非常常见，@umijs/preset-react 中默认支持 Less 和 Sass 等预处理器。
我们只需在 .umirc.ts 的配置文件中添加以下代码即可：
-- -------------------- ---- -------
------ ------- -
-------- -
----------------------- -
----- -----
-- ----- ------
-------------- -
-------- ---------------------------------
--
------ ------
---- ---
------- -
-------- -
-----------
-------------
-------------------
---------------------
---------------
--
--
-- --- ---- ------
----------- - ------------------ ---- --
---
--
-按需加载
默认情况下，@umijs/preset-react 使用了动态路由的功能，可以实现按需加载。但是，您可能还需要在一些特定情况下使用 import 或 require 进行按需加载。
在 .umirc.ts 的配置文件中添加以下代码即可：
-- -------------------- ---- -------
------ ------- -
-------- -
----------------------- -
-- ----- ------
-------------- -
-------- ---------------------------------
--
-- --- ---- ------
------------------ -
---------- - ------------ ------- ------ ---- ---
--
---
--
-自定义主题
默认情况下，@umijs/preset-react 使用了 antd 的主题，您可以根据自己的需求进行定制。
在 .umirc.ts 的配置文件中添加以下代码即可：
-- -------------------- ---- -------
------ ------- -
-------- -
----------------------- -
-- --- ---- ------
------ -
----------------- ----------
--
---
--
-总结
以上就是 @umijs/preset-react 的使用教程，我们学习了如何安装 @umijs/preset-react、如何在项目配置文件中使用 @umijs/preset-react、以及 @umijs/preset-react 的常用配置。
希望本文对您在学习和开发 React 应用有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/umijs-preset-the-react