专栏首页landvUmiJS可插拔的企业级 react 应用框架,配合ant-design-pro使用

UmiJS可插拔的企业级 react 应用框架,配合ant-design-pro使用

入门非常简单

# 安装
$ yarn global add umi # 或者 npm install -g umi

# 新建应用
$ mkdir myapp && cd myapp

# 新建页面
$ umi generate page index

# 本地开发
$ umi dev

# 构建上线
$ umi build

介绍

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

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

#特性

  • ? 开箱即用,内置 react、react-router 等
  • ? 类 next.js 且功能完备的路由约定,同时支持配置的路由方式
  • ? 完善的插件体系,覆盖从源码到构建产物的每个生命周期
  • ? 高性能,通过插件支持 PWA、以路由为单元的 code splitting 等
  • ? 支持静态页面导出,适配各种环境,比如中台业务、无线业务、egg、支付宝钱包、云凤蝶等
  • ? 开发启动快,支持一键开启 dll 等
  • ? 一键兼容到 IE9,基于 umi-plugin-polyfills
  • ? 完善的 TypeScript 支持,包括 d.ts 定义和 umi test
  • ? 与 dva 数据流的深入融合,支持 duck directory、model 的自动加载、code splitting 等等

#架构

下图是 umi 的架构图。

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

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

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

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 版本)

$ node -v
8.1x

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

# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v

# 阿里内网源
$ tnpm i yarn @ali/yarn -g
# 后面文档里的 yarn 换成 ayarn
$ ayarn -v

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

$ yarn global add umi
$ umi -v
2.0.0

FAQ:如果提示 umi: command not found,你需要将 yarn global bin 路径配置到环境变量中,方法如下:

# mac 系统:
$ sudo vi ~/.bash_profile
# 在 .bash_profile 中添加下面一行:
export PATH="$PATH:`yarn global bin`"

# windows系统:
# 获取 global bin 的路径
$ yarn global bin
C:\Users\Administrator\AppData\Local\Yarn\bin
# 复制上面的 global bin 的路径,添加到系统环境变量 PATH。

#脚手架

先找个地方建个空目录。

$ mkdir myapp && cd myapp

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

$ umi g page index
$ umi g page users

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

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

$ tree
.
└── pages
    ├── index.css
    ├── index.js
    ├── users.css
    └── users.js

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

然后启动本地服务器,

$ umi dev
?

#约定式路由

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

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

先修改 pages/index.js

+ import Link from 'umi/link';
import styles from './index.css';

export default function() {
  return (
    <div className={styles.normal}>
      <h1>Page index</h1>
+     <Link to="/users">go to /users</Link>
    </div>
  );
}

再修改 pages/users.js

+ import router from 'umi/router';
import styles from './index.css';

export default function() {
  return (
    <div className={styles.normal}>
      <h1>Page index</h1>
+     <button onClick={() => { router.goBack(); }}>go back</button>
    </div>
  );
}

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

#部署发布

#构建

执行 umi build

$ umi build

DONE  Compiled successfully in 1729ms

File sizes after gzip:

  68.04 KB  dist/umi.js
  83 B      dist/umi.css

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

$ tree ./dist
./dist
├── index.html
├── umi.css
└── umi.js

#本地验证

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

$ yarn global add serve
$ serve ./dist

Serving!

- Local:            http://localhost:5000
- On Your Network:  http://{Your IP}:5000

Copied local address to clipboard!

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

#部署

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

$ yarn global add now
$ now ./dist

> Deploying /private/tmp/sorrycc-1KVCmK/dist under chencheng
> Synced 3 files (301.93KB) [2s]
> https://dist-jtckzjjatx.now.sh [in clipboard] [1s]
> Deployment complete!

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

#测试与配置检查

#测试

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

$ umi test

Options:

    --coverage                    indicates that test coverage information should be collected and reported in the output
    --collectCoverageFrom=<glob>  a glob pattern relative to matching the files that coverage info needs to be collected from, e.g, --collectCoverageFrom=src/**/*.js
    --detectLeaks                 debug memory leaks

#配置检查

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

$ umi inspect

Options:

    --mode                specify env mode (development or production, default is development)
    --rule <ruleName>     inspect a specific module rule
    --plugin <pluginName> inspect a specific plugin
    --rules               list all module rule names
    --plugins             list all plugin names
    --verbose             show full function definitions in output

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [CodeIgniter4]-处理多环境

    开发者常常希望根据是生产环境还是开发环境能够区分不同的定制行为,例如,如果在开发环境的程序当中输出详细的错误信息这样做对开发者来说是非常有帮助的,但是这样做的话...

    landv
  • windows server 2012 R2 远程桌面授权模式尚未配置

    landv
  • c语言_头文件_windows.h

    landv
  • 快速学习ReactJS-搭建环境

    在UmiJS的约定中,config/config.js将作为UmiJS的全局配置文件。

    cwl_java
  • React - jsx

    1 1. 什么是JSX语法 2 2. jsx语法示例与渲染的VNode节点 3 3. jsx的渲染流程 4 4. jsx...

    xing.org1^
  • node.js的模块化及reqire与exports释义

    模块化是node.js的核心概念,node.js对于服务端的操作都是封装成一个个独立的核心模块,以文件读写模块File System为例:

    章鱼喵
  • 观点 | 专访贝叶斯网络之父Judea Pearl:我是AI社区的「叛徒」

    机器之心
  • Laravel Mix 初探

    针对 Laravel 优化了的 Laravel Mix, 提供了高效优雅的 API,用于使用几个常见的 CSS 和 JavaScript 预处理器为应用定义 W...

    志航
  • TypeScript在react项目中的实践

    前段时间有写过一个TypeScript在node项目中的实践。 在里边有解释了为什么要使用TS,以及在Node中的一个项目结构是怎样的。 但是那仅仅是一个纯接口...

    贾顺名
  • Docker入门-数据挂载

    数据卷是一个可供一个或多个容器使用的特殊目录,它绕过UFS,可以提供很多有用的特性:

    小码农薛尧

扫码关注云+社区

领取腾讯云代金券