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文件,这些文件又配置了同一个字段,导致相同字段内容被覆盖

相关推荐
GIS程序媛—椰子26 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00132 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端35 分钟前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x39 分钟前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟100939 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习