在使用CRACO配置的Create React App项目中如何按环境读取配置文件

错误原因 #

你的配置报错是因为CRACO的配置结构不符合规范：你将externals字段直接放在了配置根节点，CRACO不会识别该字段，Webpack没有收到对应的自定义配置，因此找不到config模块。

方案1：修正externals配置（和你参考的实现逻辑对齐） #

调整craco.config.js的结构，将Webpack自定义配置放在webpack.configure字段下，同时合并CRA内置的原有externals配置避免冲突：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 按环境匹配配置文件
      let configFile;
      switch(process.env.NODE_ENV) {
        case 'production':
          configFile = './src/config/globals/prod.js';
          break;
        case 'test':
          configFile = './src/config/globals/test.js';
          break;
        default:
          configFile = './src/config/globals/dev.js';
      }
      // 加载配置并序列化后注入externals
      const envConfig = require(configFile);
      webpackConfig.externals = {
        ...webpackConfig.externals,
        'config': JSON.stringify(envConfig)
      };
      return webpackConfig;
    }
  }
};

方案2：使用模块别名实现（更简单，兼容性更好） #

如果不需要严格遵循externals的实现方式，用Webpack别名的方案更简单，直接将config的导入路径映射到对应环境的配置文件即可，支持配置文件的CommonJS/ES Module导出格式：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      'config': path.resolve(
        __dirname,
        `./src/config/globals/${
          process.env.NODE_ENV === 'production' 
            ? 'prod' 
            : process.env.NODE_ENV === 'test' 
              ? 'test' 
              : 'dev'
        }.js`
      )
    }
  }
};

两种方案修改配置后重启CRACO服务，即可正常通过import GlobalConfig from 'config'读取对应环境的配置。

内容的提问来源于stack exchange，提问作者Smith Dwayne