介绍

umi官方宣称是一个可插拔的企业级 react 应用框架。umi 以路由为基础的,支持类 next.js 的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。然后配以完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求,目前内外部加起来已有 50+ 的插件。

umi 是蚂蚁金服的底层前端框架,已直接或间接地服务了 600+ 应用,包括 支持java、node、H5 无线、离线(Hybrid)应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户,同时希望他也能服务好外部用户。

特性

  • ? 开箱即用 ,内置 react、react-router 等

  • ? 类 next.js 且功能完备的路由约定 ,同时支持配置的路由方式

  • ? 完善的插件体系 ,覆盖从源码到构建产物的每个生命周期

  • ? 高性能 ,通过插件支持 PWA、以路由为单元的 code splitting 等

  • ? 支持静态页面导出 ,适配各种环境,比如中台业务、无线业务、egg 、支付宝钱包、云凤蝶等

  • ? 开发启动快 ,支持一键开启 dll 和 hard-source-webpack-plugin 等

  • ? 一键兼容到 IE9 ,基于 umi-plugin-polyfills

  • ? 完善的 TypeScript 支持 ,包括 d.ts 定义和 umi test

  • ? 与 dva 数据流的深入融合 ,支持 duck directory、model 的自动加载、code splitting 等等

架构图

知识图谱,阿里开源可插拔 React 跨端框架- UmiJS

从源码到上线的生命周期管理

市面上的框架基本都是从源码到构建产物,很少会考虑到各种发布流程,而 umi 则多走了这一步。

下图是 umi 从源码到上线的一个流程。

知识图谱,阿里开源可插拔 React 跨端框架- UmiJS

umi 首先会加载用户的配置和插件,然后基于配置或者目录,生成一份路由配置,再基于此路由配置,把 JS/CSS 源码和 HTML 完整地串联起来。用户配置的参数和插件会影响流程里的每个环节。

他和 dva、roadhog 是什么关系?

简单来说,

  • roadhog 是基于 webpack 的封装工具,目的是简化 webpack 的配置

  • umi 可以简单地理解为 roadhog + 路由,思路类似 next.js/nuxt.js,辅以一套插件机制,目的是通过框架的方式简化 React 开发

  • dva 目前是纯粹的数据流,和 umi 以及 roadhog 之间并没有相互的依赖关系,可以分开使用也可以一起使用,个人觉得 umi + dva 是比较搭的

为什么不是...?

next.js

next.js 的功能相对比较简单,比如他的路由配置并不支持一些高级的用法,比如布局、嵌套路由、权限路由等等,而这些在企业级的应用中是很常见的。相比 next.js,umi 在约定式路由的功能层面会更像 nuxt.js 一些。

roadhog

roadhog 是比较纯粹的 webpack 封装工具,作为一个工具,他能做的就比较有限(限于 webpack 层)。而 umi 则等于 roadhog + 路由 + HTML 生成 + 完善的插件机制,所以能在提升开发者效率方面发挥出更大的价值。

安装

  1. 入门非常简单

  2. e

  3. # 新建页面

  4. $ umi generate page index

  5. # 本地开发

  6. $ umi dev

  7. # 构建上线

  8. $ umi build

环境准备

首先得有 node,并确保 node 版本是 8.10 或以上。(mac 下推荐使用 nvm 来管理 node 版本) 

  1. $ node -v

  2. 8.1x

推荐使用 yarn 管理 npm 依赖,并使用国内源(阿里用户使用内网源)。

  1. # 国内源

  2. $ npm i yarn tyarn -g

  3. # 后面文档里的 yarn 换成 tyarn

  4. $ tyarn -v

  5. # 阿里内网源

  6. $ tnpm i yarn @ali/yarn -g

  7. # 后面文档里的 yarn 换成 ayarn

  8. $ ayarn -v

然后全局安装 umi,并确保版本是 2.0.0 或以上。

  1. $ yarn global add umi

  2. $ umi -v

  3. 2.0.0

脚手架

先找个地方建个空目录。

  1. $ mkdir myapp && cd myapp

  2. 然后通过 umi g 创建一些页面,

  3. $ umi g page index

  4. $ umi g page users

  5. umi g 是 umi generate 的别名,可用于快速生成 component、page、layout 等,并且可在插件里被扩展,比如 umi-plugin-dva 里扩展了 dva:model,然后就可以通过 umi g dva:model foo 快速 dva 的 model。

然后通过 tree 查看下目录,(windows 用户可跳过此步)

  1. $ tree

  2. .

  3. └── pages

  4. ├── index.css

  5. ├── index.js

  6. ├── users.css

  7. └── users.js

  8. 这里的 pages 目录是页面所在的目录,umi 里约定默认情况下 pages 下所有的 js 文件即路由,如果有 next.js 或 nuxt.js 的使用经验,应该会有点眼熟吧。

然后启动本地服务器,

  1. $ umi dev

约定式路由

启动 umi dev 后,大家会发现 pages 下多了个 .umi 的目录。这是啥?这是 umi 的临时目录,可以在这里做一些验证,但请不要直接在这里修改代码,umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件。

然后我们在 index 和 users 直接加一些路由跳转逻辑。

先修改 pages/index.js,

  1. import Link from 'umi/link';

  2. import styles from './index.css';

  3. export default function() {

  4. return (

  5. Page index

  6. + <Link to="/users">go to /usersLink>

再修改 pages/users.js,

  1. import router from 'umi/router';

  2. import styles from './index.css';

  3. export default function() {

  4. return (

  5. Page index

 

  • );

  • }

然后浏览器验证,应该已经可以在 index 和 users 两个页面之间通过路由跳转了。

部署发布

构建

执行 umi build,

  1. $ umi build

  2. DONE Compiled successfully in 1729ms

  3. File sizes after gzip:

  4. 68.04 KB dist/umi.js

  5. 83 B dist/umi.css

构建产物默认生成到 ./dist 下,然后通过 tree 命令查看,(windows 用户可忽略此步)

  1. $ tree ./dist

  2. ./dist

  3. ├── index.html

  4. ├── umi.css

  5. └── umi.js

本地验证

发布之前,可以通过 serve 做本地验证,

  1. $ yarn global add serve

  2. $ serve ./dist

  3. Serving!

  4. - Local: http://localhost:5000

  5. - On Your Network: http://{Your IP}:5000

  6. Copied local address to clipboard!

访问 http://localhost:5000,正常情况下应该是和 umi dev 一致的。

部署

本地验证完,就可以部署了,这里通过 now 来做演示。

  1. $ yarn global add now

  2. $ now ./dist

  3. > Deploying /private/tmp/sorrycc-1KVCmK/dist under chencheng

  4. > Synced 3 files (301.93KB) [2s]

  5. > https://dist-jtckzjjatx.now.sh [in clipboard] [1s]

  6. > Deployment complete!

然后打开相应的地址就能访问到线上的地址了。

测试与配置检查

测试

umi 内置了基于 jest 的测试工具 umi-test :

  1. $ umi test

  2. Options:

  3. --coverage indicates that test coverage information should be collected and reported in the output

配置检查

使用 umi inspect 列出配置项的内容用以检查:

  1. $ umi inspect

  2.  

  3. Options:

  4.  

  5. --mode specify env mode (development or production, default is development)

  6. --rule inspect a specific module rule

  7. --plugin inspect a specific plugin

  8. --rules list all module rule names

  9. --plugins list all plugin names

  10. --verbose show full function definitions in outpu

 

来源商业新知网,原标题:阿里开源可插拔 React 跨端框架- UmiJS