Umi3介绍（一）

写在前面

本人也是近期开始接触的umi3的，看了很多文档，自己也做了些总结，本文也主要借鉴了官方文档，还有一篇语雀上的教程

简介

Umi是什么

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

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

它主要具备以下功能：

• 🎉 可扩展，Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。
• 📦 开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。
• 🐠 企业级，经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证，值得信赖。
• 🚀 大量自研，包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等，满足日常项目的周边需求。
• 🌴 完备路由，同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。
• 🚄 面向未来，在满足需求的同时，我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化 external、bundler less 等等。

umi 是通用方案，适用于现在几乎所有的 web 环境。

Umi的优势

umi 是一个专注性能的类 next.js 端框架，它的优势是：

• 内置大量的性能优化
• 多端，无缝支持容器和浏览器访问
• 类 webpack 的插件机制
• 针对 antd 和 dva 有友好的支持

umi 最显著的特点就是「文件即路由」——在 pages 文件夹下新建文件，umi 将自动生成与文件路径对应的路由。在大部分其他前端框架中，路由配置一直是一个很麻烦的事情，而对于多人协作开发的项目，公共的配置文件则可能面临着更多的冲突。

umi 的性能

在项目性能方面 umi 已经帮你做了很多优化，包括构建产物的大小、执行效率、首屏加载、用户体验等方面，但这些优化对于开发者是无感知的，有时候你升级了一下插件版本，整个项目可能就跟着优化了，而不需要你进行其他调整。作者称“你只管写业务代码，我会负责性能，并且随着 umi 的迭代，我保证你的应用会越来越快”。

简单的说，umi 做到了开箱即用，对于开发者和前端初学者是非常友好的。

快速上手

环境准备

首先得有 node，并确保 node 版本是 10.13 或以上。（mac 下推荐使用 nvm 来管理 node 版本）

node -v
v10.13.0

安装Umi

后续需要使用 umi 来创建页面 umi g ，并执行多种任务，比如测试 umi test 、打包 umi build 和开发 umi dev 等。为了能直接在命令行中运行这些命令，你需要打开终端/控制台窗口，输入以下命令来全局安装 umi

npm install -g umi

推荐使用 yarn 代替 npm 来安装 umi ， yarn 会针对部分场景做一些缓存以节省时间，你可以输入以下命令来全局安装 yarn ：

$ npm install -g yarn

命令行执行结束后，判断 yarn 是否安装成功：

$ yarn -v
1.9.4

然后使用 yarn 安装 umi ：

# 等同于 npm install -g umi
$ yarn global add umi

命令行执行结束后，判断 umi 是否安装成功：

$ umi -v
3.0.16

注意：更多的时候，我们用到的是项目工作空间的 umi，而不是全局的 umi，由于不同版本的 umi 存在一定差异，你需要留意

创建项目（开始啦）

首先，创建一个空目录

$ mkdir myapp && cd myapp

通过 umi g page 来创建页面：

$ umi g page home
   create pages/home.js
   create pages/home.css
✔  success

也可以手动新建 home.js 文件来创建页面。得到以下的目录结构：

└── pages
    ├── home.css
    ├── home.js
    └── list.js

这里的 pages 目录是页面所在的目录，umi 约定默认情况下 pages 下所有的 js 文件即路由

启动开发服务器

$ umi dev

Compiling
✔ success webpack compiled in 3s 49ms
 DONE  Compiled successfully in 3056ms            22:37:57


  App running at:
  - Local:   http://localhost:8000/ (copied to clipboard)
  - Network: http://192.168.199.195:8000/

umi 在启动完成后将自动打开浏览器，并访问 http://localhost:8000/ ，你将看到一个404页面，这是开发环境下的 404 页面，因为目前并没有在 pages 下面创建 index.js 。不过没有关系，我们可以通过访问 http://localhost:8000/home 来访问我们创建的 home 页面。

脚手架

$ mkdir myapp && cd myapp

创建项目大致分为两种：

第一种：（这个也是官方文档教程里的）

$ yarn create @umijs/umi-app
# 或 npm create @umijs/umi-app（要全局安装 @umijs/umi-app ）
# 或 npx @umijs/create-umi-app

这种方式生成的目录结构是这样的：

第二种：

$ yarn create umi
# npm create umi

提示’create-umi-app’ 不是内部或外部命令，也不是可运行的程序或批处理文件。

需要将 yarn 的 bin 加到环境变量里面，你需要执行 yarn global bin，然后把 global bin 的路径添加到环境变量 PATH 中。

这种方式生成的目录是这样的：

这两种方式有何差异，以及具体使用的场景，后面会有详细的介绍。

安装依赖

$ yarn
# 或npm install

启动项目

$ yarn start
# 或npm run start

....
  App running at:
  - Local:   http://localhost:8000 (copied to clipboard)
  - Network: http://192.168.12.34:8000

出现了这个就表示项目启动成功，用浏览器打开：http://localhost:8000就可以查看效果了

通过 umi g page来创建页面

$ umi g page home
   create pages/home.js
   create pages/home.css
✔  success

当然，也可以通过手动创建页面。

下章更精彩
当然了，本人也在不断的踩坑中，无论是typescript，react，umi3…还有很多的坑要踩。文中有什么不妥之处，也欢迎广大网友，批评指正，如有需要提供某一模块更详细的教程的，欢迎留言。