介绍

UmiJS(五米)是阿里开源的可插拔企业级React应用框架，为什么说是可插拔，是因为它的整个生命周期都是插件化的其内部也有很多都是通过插件来实现的。其中大家熟知的Ant Design pro就是基于umi构建的。

官方文档

中文文档：https://umijs.org/zh/

Github：https://github.com/umijs/umi

特性简介

Umi的特性详细的可看官网文档，以下归纳来源于官网文档：

• 插件化

整个生命周期的插件化

• 开箱即用

我们只需要以来一个umi就可以完成项目的启动，很多配置像react、preact、webpack、react-router、babel、jest都无需安装

• 约定式路由

类next.js的路由，无需复杂的路由配置，支持权限、动态、嵌套等路由

• 性能优秀

插件化支持PWA，以路由为单元的 code splitting 等

• 静态页面导出

umi支持静态页面导出，用于无服务器端环境

• 最低支持IE9

可以兼容到到最低IE9，通过umi中的targets 配置实现js和css的补丁

• 支持Typescript

包含 umi API 的 d.ts 定义，测试方案，组件打包方案等

• 深入集成 dva 数据流方案，但不耦合

支持 duck directory、约定式的 model 挂载、model 的 动态加载等

• 支持多页应用

基于 umi-plugin-mpa

快速入门

• 安装

yarn global add umi 

或者

npm install -g umi

我在本地测试用的yarn，但是遇到了一个小坑，虽然显示安装成功，但是再执行umi -v查看版本号时发现，umi命令不存在，因此需要注意的是，你需要手动将umi的路径添加到系统的环境变量，我本地是win7,linux也是如此，以下是查看路径的方法

 yarn global bin //查看umi的路径

将路径添加到环境变量即可

• 新建页面

你首先到某个文件夹下新建一个你的项目文件夹，或者

mkdir myapp && cd myapp //创建目录并进入，然后执行下面的命令新建页面umi generate page index

• 本地开发

umi dev

• 构建上线

umi build

官网提供了十分详细的文档教程，还没体验过的小伙伴可以去尝试下啦

使用了umi的项目

• antd Admin

https://github.com/zuiidea/antd-admin

• antd Design pro

https://github.com/ant-design/ant-design-pro

总结

umi是阿里开源的非常易用的企业级React应用框架，由于umi集成了大量的插件，像dva.js数据流框架，你再也不需要为复杂的react全家桶所困扰了，用过dva的小伙伴都知道它的好用之处，在umi中你可以选择性的使用它。说再多也没用，不如自己去体验一下吧。