Umi 快速上手

一、介绍

1、根据官网介绍，Umi(乌米)，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
2、 Umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。
3、它主要具备以下功能：

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

二、什么时候不用 umi？

如果你

• 需要支持 IE 8 或更低版本的浏览器
• 需要支持 React 16.8.0 以下的 React
• 需要跑在 Node 10 以下的环境中
• 有很强的 webpack 自定义需求和主观意愿
• 需要选择不同的路由方案

Umi 可能不适合你。

三、快速上手

• 环境准备

$ node -v
v10.13.0
$ npm i yarn tyarn -g
$ tyarn -v

• 脚手架
  先找个地方建个空目录

$ mkdir myapp && cd myapp
// 通过官方工具创建项目
$ yarn create @umijs/umi-app

• 安装依赖

$ yarn

• 启动项目

$ yarn start

在浏览器里打开 http://localhost:8000/，能看到以下界面

• 修改配置
  默认的脚手架内置了 @umijs/preset-react，包含布局、权限、国际化、dva、简易数据流等常用功能。比如想要 ant-design-pro 的布局，编辑 .umirc.ts 配置 layout: {}，并且需要安装 @ant-design/pro-layout。

import { defineConfig } from 'umi';

export default defineConfig({
+ layout: {},
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
});

不用重启 yarn start，webpack 会在背后增量编译，过一会就可以看到以下界面

• 部署发布

1、构建

$ yarn build

构建产物默认生成到 ./dist 下，然后通过 tree 命令查看

tree ./dist

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

2、本地验证
发布之前，可以通过 serve 做本地验证

$ yarn add serve
$ yarn serve ./dist

访问http://localhost:5000，正常情况下应该是和执行 yarn start 时是一致的。

3、部署
本地验证完，就可以部署了。你需要把 dist 目录部署到服务器上。