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 实例
