Umi 常用配置教科书级（一）-一一网

Umi 常用配置教科书级（一）

3年前更新

7160

前言

周五约了一家公司面试，因为我个人博客是使用前端是使用Antd Desgin Pro搭建的，公司正好也在使用Antd Desgin Pro ，面试官一直在问我Umi的问题，问了几个以后发现，现在虽然对Antd Desgin Pro还算了解，但是Umi的一些配置和插件，竟然有点没想起来。现在从0-1使用Umi搭建一个环境。加深自己对Umi的了解

Umi是什么？

Umi中文可发音为乌米，是可扩展的企业级前端应用框架,是蚂蚁金服的底层前端框架.

为什么要使用Umi？相较于create-app-react的优势在哪里?

Umi

Umi内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。
Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。

create-app-react

基于Webpack的打包层方案，在打包层的体验做到了机制，但是未内置路由，数据流等功能。

创建Umi项目

安装Umi

yarn create @umijs/umi-app
复制代码

安装依赖

yarn
复制代码

运行，查看效果

yarn start
复制代码

1647140905(1).png

Umi 默认是支持TypeScrpit的，目前博主也在使用Ts进行开发，如果需要使用JS，可以自行网上找一下解决方案

Umi的配置

`.umirc`文件

配置文件，包含 umi 内置功能和插件的配置

我们先来看一下，最原始的`.umirc`文件

不一样的小伙伴不要慌，博主是先搭了一遍，再进行知识积累的。

1647141280(1).png

配置路由

我之前是使用Antd Desgin Pro，所以遵从Antd Desgin Pro的规范，在根目录下新建config文件夹，在config文件下，新建routes.ts文件

1647141450(1).png

`routes.ts`文件

创建页面文件这一步骤，各位小伙伴可以自行创建下，这里就不再重新创建了

1647141471(1).png

根据上图，可以看到，我使用了路径别名@的形式，在Umi中默认配置了@的类型别名。@指向了src目录

路由常用的Api

title : 页面标题
exact : 是否开启严格模式
path : url路径
component : 渲染的组件
wrappers : 路由的权限校验
routes : 子路由

运行页面，查看效果

/:登录页面

1647141828(1).png

/user：首页

1647141863(1).png

跳转页面

history 获取当前的路由信息，是Umi内置的一个路由Api

我们打印一下看一下都返回了什么

1647142101(1).png

history常用的Api

action: 有 PUSH、REPLACE 和 POP 三种类型
push()：跳转路由，参数是url，例如，history.push('/user')
goBack(): 返回上一个路由
location.query 携带参数Obj

不带参数跳转

1647141988(1).png

效果图

1647142368(1).png

带参数跳转

1647142427(1).png

效果图

1647142448(1).png

第二种带参数跳转

1647142542(1).png

如果参数不是太多，只是一个或者两个，建议使用第一种方式跳转，过长的话，建议使用第二种方式传递

在根目录下新建`app.tsx`文件，

1647142707(1).png

`onRouteChange()`在初始加载和路由切换时触发

这个方法，在业务开发中，我们通常会用于判断一些权限，或者用户的token是否失效。或许有其他的用途，小伙伴可以自行拓展

1647142820(1).png

`rootContainer()`在初始加载时触发，修改交给 react-dom 渲染时的根组件

通过打印container 我们发现这个参数是一个vDom，既然是vDom肯定是可以渲染到页面上的，这时候想到官方对这个函数的介绍，在联想我们使用React-Redux中需要在最外层的父组件上去包裹一层。所以我们先创建一个最外层的元素

1647143442(1).png

我们给创建的元素打上一个标识 id，同时再把接受到的props.children 渲染进来。

1647143621(1).png

效果图

1647143706(1).png

src/app.tsx在我看来，可能会用到的就是这两个方法。目前我还未能有机会在正式的项目中使用Umi，只是在个人博客项目中使用，如果有不对的对方，欢迎大佬指教.

`config/config.tsx`文件的常用配置项

`config/config.tsx`文件下声明config变量，将其通过扩展运算符的形式，拼接在`.umirc`文件下

1647145947(1).png

`404` 页面的展示

在日常开发中，如果用户打开一个不存在的url地址，是需要给用户展示一个404页面的。在Umi中，我们可以在routes.ts文件下，去配置一个规则

创建404页面,`src/[ages/404.tsx`在pages文件夹下，新建404.tsx文件

1647145648(1).png

routes.ts文件

1647145753(1).png

效果图

1647145783(1).png

`base` 路由前缀

1647146948(1).png

效果图

1647146975(1).png

`title` 整体标题

如果不再设置路由的时候设置title属性，默认显示的title标题

1647147461(1).png

效果图

1647147470(1).png

`targets`:配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换

1647147814(1).png

`dynamicImport` 网络过慢，显示的等待页面，通常是一个Loading

可以自行刷新下看效果

1647147849(1).png

`favicon` 标题logo

1647147971(1).png

效果图

1647148010(1).png

`fastRefresh`热更新

1647148086(1).png

`hash` 配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存

1647148377(1).png

`outputPath` 输入文件夹名称

1647148407(1).png

执行yarn run build命令后，查看效果图

1647148443(1).png

`plugins` 额外的Umi插件，这个后续会额外开一篇文章，重新总结

 plugins:[]
复制代码

`disableRedirectHoist`: 禁止重定向上提

disableRedirectHoist: true,
复制代码

`proxy` 配置反向代理

通常会在config文件夹下，新建一个proxy.ts文件，

1647149315(1).png

周末加班改BUG是什么体验，下周会再总结一些Umi插件。上述有不对的地方欢迎各位大佬指正

© 版权声明

文章版权归作者所有，未经允许请勿转载。

THE END

喜欢就支持一下吧

相关推荐