umpJS简介以及项目部署

Umi 是什么？它主要具备以下功能： Umi 如何工作？技术收敛插件和插件集 配置式路由和约定式路由.umi 临时文件环境准备脚手架安装依赖启动项目修改配置部署发布构建本地验证部署 本文用到的源代码可以在 这里克隆

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 如何工作？

技术收敛

他把大家常用的技术栈进行整理，收敛到一起，让大家只用 Umi 就可以完成 80% 的日常工作。

插件和插件集

Umi 支持插件和插件集，通过这张图应该很好理解到他们的关系，通过插件集我们把插件收敛依赖然后支持不同的业务类型。

配置式路由和约定式路由

Umi 的路由既支持配置式，又支持约定式。配置式是对于现实的低头，也是大部分用户在用的，因为他功能强大；约定式是我们希望走去的方向，因为他简洁优雅。

.umi 临时文件

.umi 临时目录是整个 Umi 项目的发动机，你的入口文件、路由等等都在这里，这些是由 umi 内部插件及三方插件生成的。

你通常会在 .umi 下看到以下目录，

.umi core # 内部插件生成pluginA # 外部插件生成presetB # 外部插件生成umi.ts # 入口文件

临时文件是 Umi 框架中非常重要的一部分，框架或插件会根据你的代码生成临时文件，这些原来需要放在项目里的脏乱差的部分都被藏在了这里。

你可以在这里调试代码，但不要在 .git 仓库里提交他，因为他的临时性，每次启动 umi 时都会被删除并重新生成。

环境准备

首先得有 node，并确保 node 版本是 10.13 或以上。（mac 下推荐使用 nvm 来管理 node 版本） $ node -v 推荐使用 yarn 管理 npm 依赖，并使用国内源（阿里用户使用内网源）。

国内源 $ npm i yarn tyarn -g

后面文档里的 yarn 换成 tyarn $ tyarn -v

阿里内网源 $ tnpm i yarn @ali/yarn -g

后面文档里的 yarn 换成 ayarn $ ayarn -v

脚手架

先找个地方建个空目录。 $ mkdir myapp && cd myapp

通过官方工具创建项目， $ yarn create @umijs/umi-app 或 npx @umijs/create-umi-app Copy: .editorconfig Write: .gitignore Copy: .prettierignore Copy: .prettierrc Write: .umirc.ts Copy: mock/.gitkeep Write: package.json Copy: README.md Copy: src/pages/index.less Copy: src/pages/index.tsx Copy: tsconfig.json Copy: typings.d.ts

安装依赖

$ yarn yarn install v1.21.1 [1/4] 🔍 Resolving packages… success Already up-to-date. ✨ Done in 0.71s.

启动项目

$ yarn start

Starting the development server…

✔ Webpack Compiled successfully in 17.84s

DONE Compiled successfully in 17842ms 8:06:31 PM

App running at:

Local: http://localhost:8000 (copied to clipboard)Network: http://192.168.12.34:8000 在浏览器里打开 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 会在背后增量编译，过一会就可以看到以下界面，

部署发布

构建

$ yarn build

✔ Webpack Compiled successfully in 17.17s

DONE Compiled successfully in 17167ms 8:26:25 PM

Build success. ✨ Done in 20.79s.

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

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

本地验证

发布之前，可以通过 serve 做本地验证， $ yarn global add serve $ serve ./dist 如果报serve’不是内部命令’错误，则需要先安装serve，安装命令为: $ npm install -g serve

┌────────────────────────────────────────────────────┐ │ │ │ Serving! │ │ │ │ - Local: http://localhost:5000 │ │ - On Your Network: http://192.168.12.34:5000 │ │ │ │ Copied local address to clipboard! │ │ │ └────────────────────────────────────────────────────┘

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

部署

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