阿里开源可插拔 React 跨端框架- UmiJS

IngersollAllen 发布于9月前
0 条问题

阿里之前开源: 阿里闲鱼开源 Flutter 应用框架 Fish Redux! 今天介绍的是前端React 框架- UmiJS。

介绍

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

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

特性

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

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

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

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

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

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

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

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

  • :palm_tree: 与 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 生成 + 完善的插件机制,所以能在提升开发者效率方面发挥出更大的价值。

安装

环境准备

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

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

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

脚手架

先找个地方建个空目录。

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

然后启动本地服务器,

约定式路由

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

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

先修改 pages/index.js,

再修改 pages/users.js,

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

部署发布

构建

执行 umi build,

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

本地验证

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

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

部署

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

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

测试与配置检查

测试

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

配置检查

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

官方文档

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

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

查看原文: 阿里开源可插拔 React 跨端框架- UmiJS

  • yellowmeercat
  • organicgoose
  • blackswan
  • brownmeercat
  • greenswan
  • lazyswan
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。