umi的学习记录-搭建项目

什么是umi

可扩展的企业级前端应用程序框架,插件化的企业级前端应用框架。

特性

1. 🎉 可扩展，Umi 实现了完整的生命周期，并使其插件化，Umi
   内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。

2. 开箱即用，Umi内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80%的开发需求。

3. 📦 🐠 企业级，经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证，值得信赖。

4. 🚀大量自研，包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等，满足日常项目的周边需求。

5. 🌴完备路由，同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。

6. 🚄 面向未来，在满足需求的同时，我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化external、bundler less 等等。

怎么工作

这张图是给内部框架 Bigfish 画的，套到 Umi 上同样合适。他把大家常用的技术栈进行整理，收敛到一起，让大家只用 Umi 就可以完成 80% 的日常工作。

• 插件和插件集

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

• 配置式路由和约定式路由
  Umi 的路由既支持配置式，又支持约定式。配置式是对于现实的低头，也是大部分用户在用的，因为他功能强大；约定式是我们希望走去的方向，因为他简洁优雅。
• .umi 临时文件
  .umi 临时目录是整个 Umi 项目的发动机，你的入口文件、路由等等都在这里，这些是由 umi 内部插件及三方插件生成的。

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

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

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

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

创建项目

// 创建文件夹
mkdir myapp
// cd到该文件夹
cd myapp
// 创建项目
npm create @umijs/umi-app
// 安装依赖
npm install
// 启动
npm run start

create成功：

项目目录：

项目启动后的样子：

• 配置
  默认的脚手架内置了 @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 会在背后增量编译，过一会就可以看到以下界面，

通过对路由的配置可以得到下面图片：

• 部署发布

 npm run build

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

目录结构介绍：

根目录
package.json
包含插件和插件集，以 @umijs/preset-、@umijs/plugin-、umi-preset- 和 umi-plugin- 开头的依赖会被自动注册为插件或插件集。
.umirc.ts
配置文件，包含 umi 内置功能和插件的配置。
env
环境变量。
比如：

PORT=8888
COMPRESS=none

dist 目录
执行 umi build 后，产物默认会存放在这里。
mock 目录
存储 mock 文件，此目录下所有 js 和 ts 文件会被解析为 mock 文件。

public 目录
此目录下所有文件会被 copy 到输出路径。
src 目录
.umi 目录
临时文件目录，比如入口文件、路由等，都会被临时生成到这里。不要提交 .umi 目录到 git 仓库，他们会在 umi dev 和 umi build 时被删除并重新生成。
layouts/index.tsx
约定式路由时的全局布局文件。
pages 目录
所有路由组件存放在这里。
app.ts
运行时配置文件，可以在这里扩展运行时的能力，比如修改路由、修改 render 方法等。
开启ssr渲染：

umi在性能优化方面还是做了很多扩展。