UMI 创建react目录介绍及配置

UMI 生成react项目目录介绍及配置

• react项目目录介绍
• umi多种配置方案
• 运行时配置app.ts 的使用

1、umi创建的项目目录大致如下

├─package.json 配置依赖以及启动打包所需的命令
├─.umirc.ts 配置文件，包含 umi 内置功能和插件的配置
├── dist 打包后生成的文件
├── .env 环境变量 例如 端口
├─mock mock接口
└─src 
  ├─.umi umi中间文件
  ├─layouts 手动创建：布局路由时的全局布局文件
  ├─pages 页面
  └─app.ts 手动创建：全局运行时配置

2、下面详细介绍各个目录

1) package.json

包含插件和插件集，以 @umijs/preset-、@umijs/plugin-、umi-preset- 和 umi-plugin- 开头的依赖会被自动注册为插件或插件集。用UMI创建项目会自动生成。

2) .umirc.ts

配置文件，包含 umi 内置功能和插件的配置。用UMI创建项目会自动生成。

3) .env

环境变量,自行配置,需手动创建，非必需。

4) dist 目录

执行 umi build 后，产物默认会存放在这里。打包后默认生成.

5) layouts/index.tsx

约定式路由时的全局布局文件。需手动创建，非必需。

6) pages 目录

所有路由组件存放在这里。用UMI创建项目会自动生成。

7) app.ts

运行时配置文件，可以在这里扩展运行时的能力，比如修改路由、修改 render 方法等。需手动创建，非必需。

UMI 配置

Umi 在 .umirc.ts 或 config/config.ts 中配置项目和插件，支持 es6。一份常见的配置如下，

export default {
  base: '/docs/',
  publicPath: '/static/',
  hash: true, 
  history: {
    type: 'hash', // 路由类型
  },
}

项目配置 （3种配置路由的方式）

如果项目的配置不复杂，推荐在 .umirc.ts 中写配置； 如果项目的配置比较复杂，可以将配置写在 config/config.ts 中，并把配置的一部分拆分出去，比如路由配置可以拆分成单独的 routes.ts：

方式一： 路由在.umirc.ts中配置

import { defineConfig } from 'umi';
export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  layout: {},
  hash:true,
  history: {
    type: 'hash',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {},
});

方式二： 路由在外部配置

// config/routes.ts

export default [
    { exact: true, path: '/', component: 'index' },
];

// config/config.ts

import { defineConfig } from 'umi';
import routes from './routes';

export default defineConfig({
  routes: routes,
});

提示路由在外部配置后，.umirc.ts中对routes的配置要移除，.umirc.ts 优先级更高,会把其他覆盖

export default defineConfig({
  // routes: [
  //   { path: '/', component: '@/pages/index' },
  // ],
  fastRefresh: {},
});

方式三：路由一部分在在外部配置一部分在.umirc.ts中配置

import { defineConfig } from 'umi';
import routes from './config/router';

export default defineConfig({
  routes: [
    { path: '/', component: '@/pages/index' },
    ...routes
  ],
  fastRefresh: {},
});

提示：如果你想在写配置时也有提示，可以通过 umi 的 defineConfig 方法定义配置

本地临时配置

可以新建 .umirc.local.ts，这份配置会和 .umirc.ts 做 deep merge 后形成最终配置。
注：.umirc.local.ts 仅在 umi dev 时有效。umi build 时不会被加载。

例如 在 .umirc.ts

import { defineConfig } from 'umi';
export default defineConfig({
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
});

在.umirc.local.ts中写入

import { defineConfig } from 'umi';
export default defineConfig({
  routes: [
    { exact: true, path: '/hello1', component: '@/pages/Hello' },
  ],
});

运行发现，两个路由都可以生效

多环境多份配置

可以通过环境变量 UMI_ENV 区分不同环境来指定配置。例如 配置.umirc.local.ts(上面已经配置了)和.umirc.test.ts,
.umirc.test.ts

import { defineConfig } from 'umi';
export default defineConfig({
  routes: [
    { exact: true, path: '/hello1', component: '@/pages/Test' },
  ],
});

在.env文件中配置

UMI_ENV = test

执行发生，生效的是.umirc.test.ts，

运行时配置

UMI 运行时配置 app.ts配置

1、修改 clientRender 参数（适用微前端）

比如在微前端里动态修改渲染根节点,后期微服务可能会用到

let isSubApp = false;
export function modifyClientRenderOpts(memo) {
  return {
    ...memo,
    rootElement: isSubApp ? 'sub-root' : memo.rootElement,    
  };
}

打印 memo的值，memo值包含plugin、rootElement、routes（路由）

2、patchRoutes({ routes }) （修改路由）

修改路由：比如在最前面添加一个 /foo 路由，这个比较常见就用网上的例子

export function patchRoutes({ routes }) {
  routes.unshift({
    path: '/foo',
    exact: true,
    component: require('@/extraRoutes/foo').default,
  });
}

3、render （适用权限控制）

覆写 render，可用于渲染前的控制，例如权限控制

// 权限控制 比如用于渲染之前做权限校验
export function render(oldRender) {
  fetch('/api/auth').then(auth => {
    if (auth.isLogin) { oldRender() }
    else { 
      history.push('/login'); 
      oldRender()
    }
  });
}

4、onRouteChange({ routes, matchedRoutes, location, action })

在初始加载和路由切换时做一些事情。

• routes:全部路由
• matchedRoutes: 匹配到的路由信息
• location: 当前的location
• action: 当前路由变化的行为 例如 push

export function onRouteChange({ routes, matchedRoutes, location, action  }) {
  console.log('onRouteChange: routes, matchedRoutes, location, action',routes, matchedRoutes, location, action)
  if (matchedRoutes.length) {
    document.title = matchedRoutes[matchedRoutes.length - 1].route.title || '标题修改中';
  }
}

打印 routes, matchedRoutes, location, action的值，如下图

5、rootContainer(LastRootContainer, args)

修改交给 react-dom 渲染时的根组件。例如渲染时根组件时，外部包裹一层

export function rootContainer(container) {
  return React.createElement(ThemeProvider, null, container);
}

args 包含：

• routes，全量路由配置
• plugin，运行时插件机制
• history，history 实例