umi max配置文件问题排查

现象描述

分别执行cross-env UMI_ENV=test max buildcross-env UMI_ENV=production max build,在config/config.tsheadScripts的首个资源加载存在差异。production会丢失首个资源,而test不会。

执行环境

  • @umijs/max@4.0.78

分析

因为主要是配置文件方向的问题,所以从配置文件入手,定位到getUserConfig函数:

ts 复制代码
  getUserConfig() {
    const configFiles = Config.getConfigFiles({
      mainConfigFile: this.mainConfigFile,
      env: this.opts.env,
      specifiedEnv: this.opts.specifiedEnv,
    });
    return Config.getUserConfig({
      configFiles: getAbsFiles({
        files: configFiles,
        cwd: this.opts.cwd,
      }),
    });
  }

这里的configFiles,当执行cross-env UMI_ENV=production max build时是:

js 复制代码
[
  '/config/config.ts',
  '/config/config.production.ts',
  '/config/config.prod.ts',
  '/config/config.prod.production.ts'
]

当执行cross-env UMI_ENV=test max build时是:

js 复制代码
[
  '/config/config.ts',
  '/config/config.test.ts',
  '/config/config.prod.ts',
  '/config/config.prod.test.ts'
]

当执行max build时是:

js 复制代码
[
  '/config/config.ts',
  '/config/config.prod.ts'
]

很显然,无论是拿种情况,都会不止加载一个config/config.ts文件,而是会根据env来加载额外文件,并且把这些文件内容用lodash.merge合并 处理。

而我们在/config/下一共有两个配置文件,/config/config.ts/config/config.production.ts,当指定了envproduction时,会加载/config/config.production.ts文件并与/config/config.ts文件用lodash.merge做内容合并处理。而我们在这两个文件中都配置了headScripts,并且/config/config.production.ts中的headScripts恰好是配置了一个元素,于是导致合并的时候/config/config.ts中的headScripts第一个元素因为被覆盖而丢失。

丢失的原因是,lodash.merge 的合并处理,对于字符串数组来说,合并会导致相同位置的内容被替换,如:

js 复制代码
const lodash = require('lodash');

lodash.merge(['1', '2', '3'], ['21']);

// 结果是:[ '21', '2', '3' ]

结论

执行build命令时指定了env,加载了多个config文件,这些文件又配置了同一个字段,导致相同字段内容被覆盖

相关推荐
m0_7482402525 分钟前
前端如何检测用户登录状态是否过期
前端
black^sugar26 分钟前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人1 小时前
前端知识补充—CSS
前端·css
GISer_Jing1 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245521 小时前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v2 小时前
webpack最基础的配置
前端·webpack·node.js
pubuzhixing2 小时前
开源白板新方案:Plait 同时支持 Angular 和 React 啦!
前端·开源·github
2401_857600952 小时前
SSM 与 Vue 共筑电脑测评系统:精准洞察电脑世界
前端·javascript·vue.js
2401_857600952 小时前
数字时代的医疗挂号变革:SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL2 小时前
vue入门教程:组件透传 Attributes
前端·javascript·vue.js