一、umi介绍与文件结构

简单说umi就是提供一个脚手架和路由，相当于vue-router的加强版。v^2.8.7

一、介绍

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的。内置 react、react-router 等(所以用umi是不用再引入这两个东西了)，umi-plugin-react插件也内置了react-dom，与 dva 数据流的深入融合

umi等于roadhog(基于 webpack 的封装工具，目的是简化 webpack 的配置) + 路由 + HTML 生成 + 完善的插件机制

• 从源码到上线的生命周期管理: 市面上的框架基本都是从源码到构建产物，很少会考虑到各种发布流程；而 umi 是从源码到构建产物，再到发布流程。
  • umi 首先会加载用户的配置和插件，然后基于配置或者目录，生成一份路由配置，再基于此路由配置，把 JS/CSS 源码和 HTML 完整地串联起来。资源加载如下图：

源码：document.ejs  js/ts files  css/less files  images  fonts
生成路由配置：user config   plugins
基于路由配置，把JS/CSS 源码和 HTML 完整地串联起来，构成build产物
最后部署

二、快速上手

注：按照下面步骤一步一步的走

安装：npm install umi -g

查版本：umi -v

• 创页面: umi g page index, umi g page users。这个步骤会创建一个pages文件夹，然后里面包含index.js、index.css、users.js、users.css
  • 这里的 pages 目录是页面所在的目录，umi 里约定默认情况下 pages 下所有的 js 文件即约定式路由；比如index.js就是首页路由/对应组件,users.js就是路由/users对应组件

• 启动服务器：umi dev。这步就会直接打开页面了，并且pages 下会多一个 .umi 目录
  • .umi目录：这是 umi 的临时目录，可以在这里做一些验证，但请不要直接在这里修改代码，umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件

修改index.js 和 users.js 直接加一些路由跳转逻辑

// pages/index.js
+ import Link from 'umi/link';
import styles from './index.css';
export default function() {
  return (
    

      
Page index
+     go to /users
    
  );
}

// pages/users.js
+ import router from 'umi/router';
import styles from './index.css';

export default function() {
  return (
    

      
Page index
+      { router.goBack(); }}>go back
    
  );
}

构建：umi build。构建产物默认生成到 ./dist 下

本地验证构建出来的文件：npm install serve -g, serve ./dist。由于构建出来的dist中的文件，我们是不能直接打开的，所以需要用这里这个serve来看一下，构建出来的有没有出问题

部署：npm install now -g, now ./dist。这里这个部署，亲测，没法用。

测试：umi test。umi 内置了基于 jest 的测试工具 umi-test

配置检查：umi inspect。这个是列出所有配置项的内容

三、目录及约定

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

• dist: 默认输出路径，可通过配置 outputPath 修改。
• mock: 此目录下所有的 .js 文件（包括 _ 前缀的）都会被解析为 mock 文件
• src/layouts/index.js: 全局布局，在路由外面套的一层路由

// 假设路由为
[{ path: '/', component: './pages/index' },
  { path: '/users', component: './pages/users' },]
// 配置了layouts/index.js，那么路由就会变为
[{ path: '/', component: './layouts/index', routes: [
    { path: '/', component: './pages/index' },
    { path: '/users', component: './pages/users' },] }]

• src/pages: 约定 pages 下所有的 js、jsx、ts 和 tsx 文件即约定式基础路由
• src/pages/404.js: 404 页面。注意开发模式下有内置 umi 提供的 404 提示页面，所以只有显式访问 /404 才能访问到这个页面
• src/pages/document.ejs: 有这个文件时，会覆盖默认的 HTML 模板。相当于入口的index.html文件
• .test.(js|ts) 和 .e2e.(js|ts): 测试文件，umi test 会查找所有的 .test.js 和 .e2e.js 文件来跑测试
• src/global.(js|ts): 此文件会在入口文件的最前面被自动引入，可以在这里加载补丁，做一些初始化的操作等
• src/global.(css|less|sass|scss): 此文件不走 css modules，且会自动被引入，可以在这里写全局样式，以及做样式覆盖
• src/app.(js|ts): 运行时配置文件，可以在这里扩展运行时的能力，比如修改路由、修改 render 方法等