如何在React中获取npm命令行传入的配置参数？

1. 解析命令行参数并通过Webpack注入全局变量 #

在Webpack配置文件中，直接读取命令行参数，再用DefinePlugin将参数注入到代码全局，让React代码能直接访问：

// webpack.config.js
const webpack = require('webpack');

// 解析命令行中的configuration参数
const getEnvConfiguration = () => {
  const cliArgs = process.argv.slice(2);
  for (const arg of cliArgs) {
    if (arg.startsWith('--configuration=')) {
      return arg.split('=')[1].toUpperCase(); // 统一转为大写的DEV/QA
    }
  }
  // 未传入参数时的默认值
  return 'DEV';
};

const currentConfig = getEnvConfiguration();

module.exports = {
  // 你的其他Webpack配置（入口、输出、loader等）
  plugins: [
    new webpack.DefinePlugin({
      // 注意用JSON.stringify处理，避免字符串解析问题
      'process.env.CONFIGURATION': JSON.stringify(currentConfig),
    }),
  ],
};

2. 在React代码中直接使用参数 #

配置完成后，你可以在任意React组件或JS文件中直接获取该参数：

// App.js
function App() {
  const env = process.env.CONFIGURATION;
  
  return (
    <div className="app-container">
      <h1>当前环境: {env}</h1>
      {env === 'DEV' && <div className="dev-notice">这是开发环境专属模块</div>}
      {env === 'QA' && <div className="qa-notice">这是测试环境专属模块</div>}
    </div>
  );
}

export default App;

3. 可选优化：简化命令行输入（用cross-env） #

如果觉得每次输入npm run build -- --configuration=xxx太繁琐，可以借助cross-env包统一管理环境变量，先安装依赖：

npm install cross-env --save-dev

然后修改package.json的脚本：

{
  "scripts": {
    "build:dev": "cross-env CONFIGURATION=DEV webpack build",
    "build:qa": "cross-env CONFIGURATION=QA webpack build"
  }
}

此时Webpack配置可以简化，直接读取环境变量：

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.CONFIGURATION': JSON.stringify(process.env.CONFIGURATION || 'DEV'),
    }),
  ],
};

之后只需执行npm run build:dev或npm run build:qa即可完成对应环境的构建。

注意事项 #

• DefinePlugin是在构建阶段直接替换代码中的变量，最终打包后的代码里不会存在process.env.CONFIGURATION，只会是具体的字符串值（比如"DEV"），无法在运行时动态修改。
• 如果使用TypeScript，需要在env.d.ts中声明全局变量避免类型报错：

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      CONFIGURATION: 'DEV' | 'QA';
    }
  }
}

export {};

内容的提问来源于stack exchange，提问作者Atique Ahmed