如何给Create-React-App 加上自定义环境变量

在根目录加入.env文件，可作为全局的环境变量文件。除此以外，还可以根据当前环境的不同，开发、生产环境获取不同的配置文件。npm run eject后出现的env.js 有一段获取环境变量的代码：

const dotenvFiles = [ // 
  `${paths.dotenv}.${NODE_ENV}.local`,
  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
  `${paths.dotenv}.${NODE_ENV}`,
  paths.dotenv,
].filter(Boolean);

等同于： 

const dotenvFiles = [ // 
  `env.${NODE_ENV}.local`,
  NODE_ENV !== 'test' && `env.local`,
  `env.${NODE_ENV}`,
  .env,
].filter(Boolean);

从代码可以看出来，webpack中默认会拿dotenvFile中的文件，把里面的变量插入到process.env中，需要注意的是，配置文件中的变量必须以REACT_APP_为前缀，因为解析过程中，代码用过滤器把无前缀的变量过滤出去，目的是避免意外地在可能具有相同名称的计算机上公开私钥。同时可以看出，cra默认加入了NODE_ENV这个变量，并赋值为development。

    .filter(key => REACT_APP.test(key)) // 保留REACT_APP_前缀的
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        NODE_ENV: process.env.NODE_ENV || 'development',
        PUBLIC_URL: publicUrl,
        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
      }
    );

如图所示，只有REACT_APP_GENERATE_SOURCEMAP 这个可以用process.env.GENERATE_SOURCEMAP获取到，其他的变量将不会被push到process.env里面。