UmiJS 是一个 react 开发框架

vlambda
2021-04-26

UmiJS 是一个 react 开发框架

Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

它主要具备以下功能：

1、可扩展，Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。

2、开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。

为什么不是？create-react-app

create-react-app 是基于 webpack 的打包层方案，包含 build、dev、lint 等，他在打包层把体验做到了极致，但是不包含路由，不是框架，也不支持配置。所以，如果大家想基于他修改部分配置，或者希望在打包层之外也做技术收敛时，就会遇到困难。

# 创建目录$ mkdir myapp && cd myapp
# 安装依赖$ yarn add umi
# 创建页面$ npx umi g page index --typescript --less
# 启动开发$ npx umi dev

目录约定

├── dist/ // 默认的 build 输出目录├── mock/ // mock 文件所在目录，基于 express├── config/ ├── config.js // umi 配置，同 .umirc.js，二选一└── src/ // 源码目录，可选 ├── layouts/index.js // 全局布局 ├── pages/ // 页面目录，里面的文件即路由 ├── .umi/ // dev 临时目录，需添加到 .gitignore ├── .umi-production/ // build 临时目录，会自动删除 ├── document.ejs // HTML 模板 ├── 404.js // 404 页面 ├── page1.js // 页面 1，任意命名，导出 react 组件 ├── page1.test.js // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件 └── page2.js // 页面 2，任意命名 ├── global.css // 约定的全局样式文件，自动引入，也可以用 global.less ├── global.js // 可以在这里加入 polyfill├── .umirc.js // umi 配置，同 config/config.js，二选一├── .env // 环境变量└── package.json

除配置式路由外，Umi 也支持约定式路由。约定式路由也叫文件路由，就是不需要手写配置，文件系统即路由，通过目录和文件及其命名分析出路由配置。

如果没有 routes 配置，Umi 会进入约定式路由模式，然后分析 src/pages 目录拿到路由配置。

约定 src/layouts/index.js 为全局路由，返回一个 React 组件，通过 props.children 渲染子组件。

└── src ├── layouts │ └── index.tsx └── pages ├── index.tsx └── users.tsx

一个自定义的全局 layout 如下：

import React from 'react'import { IRouteComponentProps, Link } from 'umi'
export default function Layout({ children, location, route, history, match }: IRouteComponentProps) { // return children return ( <> <nav> <div> <div> <ul> <li><Link to="/" >首页</Link></li> <li><Link to="/user" >用户管理</Link></li> <li><Link to="/profile">个人设置</Link></li> </ul> </div> </div> </nav> <div> <div> <div> { children } </div> </div> </div> </> )}

Umi 里约定目录下有 _layout.tsx 时会生成嵌套路由，以 _layout.tsx 为该目录的 layout。layout 文件需要返回一个 React 组件，并通过 props.children 渲染子组件。

比如以下目录结构，

└── pages └── users ├── _layout.tsx ├── index.tsx └── list.tsx

vlambda博客
学习文章列表