UmiJS 3.X实战从头开始(三):配置与运行时配置

凡所有相

1. 配置

首先,我们前面提到过,Umi 的配置在 .umirc.tsconfig/config.ts (二选一,.umirc.ts 优先级更高)文件中。配置按约定进行,例如,需要适用 AntDesign 布局的话,就设置 layout 配置,需要多语言配置,就设置 locale :

  layout: {
    name: 'Ant Design'
  },
  locale: {
    default: 'zh-CN'
  },

2. 本地临时配置

可以新建 .umirc.local.ts,这份配置会和 .umirc.ts 做 deep merge 后形成最终配置。

注:.umirc.local.ts 仅在 umi dev 时有效。umi build 时不会被加载。

需要注意以下几点:

  • config/config.ts 对应的是 config/config.local.ts
  • .local.ts 是本地验证使用的临时配置,请将其添加到 .gitignore务必不要提交到 git 仓库中
  • .local.ts 配置的优先级最高,比 UMI_ENV 指定的配置更高

3. 运行时配置

配置文件: src/app.tsx
运行时配置,也就是说这里配置的内容,是在浏览器运行时的配置,因此这个配置文件不能引入node依赖包(node依赖包是前端发布时引用的,运行时配置不参与发布)。

通过运行时配置,可以 修改覆盖,或者 补充 框架中的默认配置内容。

运行时配置可选的配置项如下:

  • modifyClientRenderOpts(fn)

修改 clientRender 参数。

比如在微前端里动态修改渲染根节点:

let isSubApp = false;

export function modifyClientRenderOpts(memo) {

 return {

     ...memo,

     rootElement: isSubApp ? 'sub-root' : memo.rootElement, 

 };

}
  • patchRoutes({ routes })

修改路由。

比如在最前面添加一个 /foo 路由,

export function patchRoutes({ routes }) {

     routes.unshift({

     path: '/foo',

     exact: true,

     component: require('@/extraRoutes/foo').default,

 });

}

比如和 render 配置配合使用,请求服务端根据响应动态更新路由,

let extraRoutes;

export function patchRoutes({ routes }) {

 merge(routes, extraRoutes);

}

export function render(oldRender) {

 fetch('/api/routes').then(res=>res.json()).then((res) => { 

     extraRoutes = res.routes;

     oldRender();

 })

}
注意:直接修改routes,不需要返回
  • render(oldRender: Function)

覆写 render。

比如用于渲染之前做权限校验,

import { history } from 'umi';

export function render(oldRender) {

 fetch('/api/auth').then(auth => {

     if (auth.isLogin) { oldRender() }

     else { 

         history.push('/login'); 

         oldRender()

     }

 });

}
  • onRouteChange({ routes, matchedRoutes, location, action })

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

比如用于做埋点统计,

export function onRouteChange({ location, routes, action }) {

 bacon(location.pathname);

}

比如用于设置标题,

export function onRouteChange({ matchedRoutes }) {

 if (matchedRoutes.length) {

    document.title = matchedRoutes[matchedRoutes.length - 1].route.title || '';

 }

}
  • rootContainer(LastRootContainer, args)

修改交给 react-dom 渲染时的根组件。

比如用于在外面包一个 Provider,

export function rootContainer(container) {

 return React.createElement(ThemeProvider, null, container);

}

args 包含:

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

Umi 允许插件注册运行时配置,如果你使用插件,肯定会在插件里找到更多运行时的配置项。


上一篇:UmiJS 3.X实战从头开始(二):如何使用
下一篇:UmiJS 3.X实战从头开始(四):配置式路由与约定式路由

阅读 136

有为法
前端知识边学边写,为自己积累,也希望能为别人解惑。

一切有为法 如梦幻泡影

512 声望
9 粉丝
0 条评论
你知道吗?

一切有为法 如梦幻泡影

512 声望
9 粉丝
宣传栏