@epmkit/cra-template-epm-plugin/template/config/env.js

The base template for EPM plugins.

'use strict';

const fs = require('fs');
const path = require('path');
const paths = require('./paths');

// 确保在 env.js 之后引入 paths.js 以读取 .env 变量。
delete require.cache[require.resolve('./paths')];

const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
  throw new Error(
    'The NODE_ENV environment variable is required but was not specified.'
  );
}

const dotenvFiles = [
  `${paths.dotenv}.${NODE_ENV}.local`,
  // `test` 环境不包含 `.env.local`，因为通常你希望测试对每个人都产生相同的结果
  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
  `${paths.dotenv}.${NODE_ENV}`,
  paths.dotenv,
].filter(Boolean);

// 从 .env* 文件中加载环境变量。如果该文件不存在，则使用 silent 模式抑制警告。
// dotenv 永远不会修改已经设置的任何环境变量。.env 文件支持变量扩展。
dotenvFiles.forEach(dotenvFile => {
  if (fs.existsSync(dotenvFile)) {
    require('dotenv-expand')(
      require('dotenv').config({
        path: dotenvFile,
      })
    );
  }
});

// 支持根据 `NODE_PATH` 解析模块。
const appDirectory = fs.realpathSync(process.cwd());
process.env.NODE_PATH = (process.env.NODE_PATH || '')
  .split(path.delimiter)
  .filter(folder => folder && !path.isAbsolute(folder))
  .map(folder => path.resolve(appDirectory, folder))
  .join(path.delimiter);

// 获取 NODE_ENV 和 REACT_APP_* 环境变量，并准备将它们通过 DefinePlugin 注入到 webpack 配置中。
// 定义一个正则表达式，用于匹配 REACT_APP_* 环境变量
const REACT_APP = /^REACT_APP_/i;

function getClientEnvironment(publicUrl) {
  const raw = Object.keys(process.env)
    .filter(key => REACT_APP.test(key))
    .reduce(
      (env, key) => {
        env[key] = process.env[key];
        return env;
      },
      {
        // 用于确定是否在生产模式下运行。
        NODE_ENV: process.env.NODE_ENV || 'development',
        // 用于解析 `public` 目录中静态资源的正确路径。
        // 例如，<img src={process.env.PUBLIC_URL + '/img/logo.png'} />。
        // 这只应该被用作一个逃生口。通常你应该将图片放在 `src` 中并在代码中导入它们以获取它们的路径。
        PUBLIC_URL: publicUrl,
        // 支持在开发过程中配置 sockjs 路径名。
        // 这些设置允许开发人员同时运行多个项目。
        // 在 webpackHotDevClient 中用作连接 `hostname`、`pathname` 和 `port`。
        // 在 webpack-dev-server 中用作 `sockHost`、`sockPath` 和 `sockPort` 选项。
        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
        // 是否启用 react-refresh。
        // 在 webpackHotDevClient 中定义，以便可用。
        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
      }
    );
  // 将所有值转换为字符串，以便我们可以将其提供给 webpack DefinePlugin
  const stringified = {
    'process.env': Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };

  return { raw, stringified };
}

module.exports = getClientEnvironment;