1.2.7. umi

阐述对umi框架的认识

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

项目中用到了哪些umi plugin，分别是什么作用

• plugin-access，权限管理
• plugin-analytics，统计管理
• plugin-antd，整合 antd UI 组件
• plugin-crossorigin，通常用于 JS 出错统计
• plugin-dva，整合 dva
• plugin-helmet，整合 react-helmet，管理 HTML 文档标签（如标题、描述等）
• plugin-initial-state，初始化数据管理
• plugin-layout，配置启用 ant-design-pro 的布局
• plugin-locale，国际化能力
• plugin-model，基于 hooks 的简易数据流
• plugin-request，基于 umi-request 和 umi-hooks 的请求方案

从执行umi dev到页面启动，umi做了啥

• umi包主要对外提供一些命令，如umi dev，umi build，umi inspect，umi test。
• 它通过实例化一个Service实例完成整个流程，new Service().run('dev', args);。
• Service实例化之后，运行run方法，该方法有两步，第一步初始化，第二步运行对应的命令
• dev命令行中通过注册filesGenerator去生成.umi目录

分析.umi目录到组成与作用

.
├── dist/                          // 默认的 build 输出目录
├── mock/                          // mock 文件所在目录，基于 express
├── config/
    ├── config.js                  // umi 配置，同 .umirc.js，二选一
└── src/                           // 源码目录，可选
    ├── layouts/index.js           // 全局布局
    ├── pages/                     // 页面目录，里面的文件即路由
        ├── .umi/                  // dev 临时目录，需添加到 .gitignore
        ├── .umi-production/       // build 临时目录，会自动删除
        ├── document.ejs           // HTML 模板
        ├── 404.js                 // 404 页面
        ├── page1.js               // 页面 1，任意命名，导出 react 组件
        ├── page1.test.js          // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
        └── page2.js               // 页面 2，任意命名
    ├── global.css                 // 约定的全局样式文件，自动引入，也可以用 global.less
    ├── global.js                  // 可以在这里加入 polyfill
    ├── app.js                     // 运行时配置文件
├── .umirc.js                      // umi 配置，同 config/config.js，二选一
├── .env                           // 环境变量
└── package.json

• 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 方法等。

如何注册、使用一个umi plugin

1. package.json依赖 Umi 会自动检测 dependencies 和 devDependencies 里的 umi 插件，比如：

{
  "dependencies": {
    "@umijs/preset-react": "1"
  }
}

那么 @umijs/preset-react 会自动被注册，无需在配置里重复声明。

2. 配置 在配置里可通过 presets 和 plugins 配置插件，比如：

export default {
  presets: ['./preset', 'foo/presets'],
  plugins: ['./plugin'],
}

• 通常用于几种情况：
  • 项目相对路径的插件
  • 非 npm 包入口文件的插件

3. 环境变量

• 还可通过环境变量 UMI_PRESETS 和 UMI_PLUGINS 注册额外插件。
• 比如：$ UMI_PRESETS=/a/b/preset.js umi dev
• 注意：项目里不建议使用，通常用于基于 umi 的框架二次封装