Umi.js

摘要：，中文可发音为乌米，是一个可插拔的企业级应用框架。以路由为基础的，支持类的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。全局存于目录，所有页面都可引用页面不能被其他页面所引用。

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求，目前内外部加起来已有 50+ 的插件

开箱即用，内置 react、react-router 等

类 next.js 且功能完备的路由约定，同时支持配置的路由方式

完善的插件体系，覆盖从源码到构建产物的每个生命周期

一键兼容到 IE9

完善的 TypeScript 支持

与 dva 数据流的深入融合

.
├── 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
├── .umirc.js                      // umi 配置，同 config/config.js，二选一
├── .env                           // 环境变量
└── package.json

启动 umi dev 后，大家会发现 pages 下多了个 .umi 的目录请不要直接在这里修改代码，umi 重启或者 pages 下的文件修改都会重新生成这个文件夹下的文件，约定 pages 下所有的 (j|t)sx? 文件即路由

1.基础路由

//假设 pages 目录结构如下：
 1. pages/
 2. users/
    - index.js
    - list.js
 3. index.js
//那么，umi 会自动生成路由配置如下
[
  { path: "/", component: "./pages/index.js" },
  { path: "/users/", component: "./pages/users/index.js" },
  { path: "/users/list", component: "./pages/users/list.js" },
]

2.动态路由

+ pages/
  + $post/
    - index.js
    - comments.js
  + users/
    $id.js
  - index.js

[
  { path: "/", component: "./pages/index.js" },
  { path: "/users/:id", component: "./pages/users/$id.js" },
  { path: "/:post/", component: "./pages/$post/index.js" },
  { path: "/:post/comments", component: "./pages/$post/comments.js" },
]

3.可选的动态路由

+ pages/
  + users/
    - $id$.js
  - index.js

[
  { path: "/": component: "./pages/index.js" },
  { path: "/users/:id?": component: "./pages/users/$id$.js" },
]

4.嵌套路由

umi 里约定目录下有 _layout.js 时会生成嵌套路由，以 _layout.js 为该目录的 layout

+ pages/
  + users/
    - _layout.js
    - $id.js
    - index.js
    
----------
[
  { path: "/users", component: "./pages/users/_layout.js",
    routes: [
     { path: "/users/", component: "./pages/users/index.js" },
     { path: "/users/:id", component: "./pages/users/$id.js" },
   ],
  },
]

1.声明式

import Link from "umi/link";

export default () => (
  Go to list page
);

2.命令式

import router from "umi/router";

function goToListPage() {
  router.push("/list");
}

3.connect 后路由切换后没有刷新用withRouter

import withRouter from "umi/withRouter";

export default withRouter(connect(mapStateToProps)(LayoutComponent));

特性

按目录约定注册 model，无需手动 app.model

文件名即 namespace，可以省去 model 导出的 namespace key

无需手写 router.js，交给 umi 处理，支持 model 和 component 的按需加载

内置 query-string 处理，无需再手动解码和编码

内置 dva-loading 和 dva-immer，其中 dva-immer 需通过配置开启

开箱即用，无需安装额外依赖，比如 dva、dva-loading、dva-immer、path-to-regexp、object-assign、react、react-dom 等

1..umirc.js 里配置插件（或者在config里配置）

xport default {
  plugins: [
    [
      "umi-plugin-react",
      {
        dva: true,
      },
    ]
  ],
};

2.model 注册

model 分两类，一是全局 model，二是页面 model。全局 model 存于 /src/models/ 目录，所有页面都可引用；页面 model 不能被其他页面所引用。
规则如下：

src/models/*/.js 为 global model

src/pages//models//*.js 为 page model

global model 全量载入，page model 在 production 时按需载入，在 development 时全量载入

page model 为 page js 所在路径下 models/*/.js 的文件

page model 会向上查找，比如 page js 为 pages/a/b.js，他的 page model 为 pages/a/b/models//.js + pages/a/models//.js，依次类推

约定 model.js 为单文件 model，解决只有一个 model 时不需要建 models 目录的问题，有 model.js 则不去找 models/*/.js

+ src
  + models
    - g.js//全局model可共用
  + pages
    + a//a 的 page model 为 src/pages/a/models/{a,b,ss/s}.js
      + models
        - a.js
        - b.js
        + ss
          - s.js
      - page.js
    + c//c 的 page model 为 src/pages/c/model.js
      - model.js
      + d//c/d 的 page model 为 src/pages/c/model.js, src/pages/c/d/models/d.js
        + models
          - d.js
        - page.js
      - page.js

1.在config文件目录下的config.router.js配置相关参数

{
        name: "基础数据",
        icon: "table",
        path: "/basicData",
        routes: [
          {
            path: "basicData/list",
            name: "数据列表",
            component: "./BasicData/BasicList",
          }
        ]
      },

2.在pages文件下建好文件，全局model直接写到src/models下面，页面model写到pages/页面/models

3.umi会自动生成相关的路由及其model的（在.umi的router.js下面自动生成代码）

{
        "name": "基础数据",
        "icon": "table",
        "path": "/basicData",
        "routes": [
          {
            "path": "/basicData/list",
            "name": "数据列表",
            "component": _dvaDynamic({
  app: window.g_app,
models: () => [
  import("/home/jianjiacheng/WebstormProjects/Antd_Pro_UMI_JS_FrameWork/src/pages/BasicData/models/basicDataModal.js").then(m => { return { namespace: "basicDataModal",...m.default}})
],
  component: () => import("../BasicData/BasicList"),
  LoadingComponent: require("/home/jianjiacheng/WebstormProjects/Antd_Pro_UMI_JS_FrameWork/src/components/PageLoading/index").default,
}),
            "exact": true
          },
          {
            "component": () => React.createElement(require("/home/jianjiacheng/WebstormProjects/Antd_Pro_UMI_JS_FrameWork/node_modules/_umi-build-dev@1.3.5@umi-build-dev/lib/plugins/404/NotFound.js").default, { pagesPath: "src/pages", hasRoutesInConfig: true })
          }
        ]
      },