启东网站建设,商贸有限公司注销流程,购卡网页怎么制作,qq刷赞网站咋做UMI 生成react项目目录介绍及配置
react项目目录介绍umi多种配置方案运行时配置app.ts 的使用
1、umi创建的项目目录大致如下
├─package.json 配置依赖以及启动打包所需的命令
├─.umirc.ts 配置文件#xff0c;包含 umi 内置功能和插件的配置
├── dist 打包后生成的…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: 当前的locationaction: 当前路由变化的行为 例如 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运行时插件机制historyhistory 实例
