umi max配置文件问题排查

啦萌朵2024-02-20 13:56

现象描述

分别执行cross-env UMI_ENV=test max build和cross-env UMI_ENV=production max build，在config/config.ts中headScripts的首个资源加载存在差异。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，当指定了env为production时，会加载/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文件，这些文件又配置了同一个字段，导致相同字段内容被覆盖