如何在React代码中通过Webpack DefinePlugin获取应用运行环境？

嘿，我来帮你搞定这个环境变量的问题！你之前遇到的appenv is not defined错误，主要是因为Webpack的DefinePlugin/EnvironmentPlugin配置方式不对，或者代码里的变量访问逻辑不符合规范。下面给你一步步拆解正确的做法：

一、Webpack DefinePlugin的正确用法 #

直接定义全局变量容易触发ESLint的未定义警告，更规范的方式是把变量挂载到process.env下，既符合Node.js环境变量的惯例，也能避开报错。

1. 配置webpack.config.js #

const webpack = require('webpack');

module.exports = {
  // 你的其他webpack配置（entry、output等）
  plugins: [
    new webpack.DefinePlugin({
      // 注意键名要加引号，值必须用JSON.stringify处理
      'process.env.APP_ENV': JSON.stringify('dev')
    })
  ]
};

2. 在React组件中访问 #

console.log("当前环境: " + process.env.APP_ENV); // 输出 "当前环境: dev"

为什么之前的代码报错？因为你直接定义了appenv，webpack会把代码里的appenv替换成'dev'，但如果你的代码检查工具（比如ESLint）把未声明的变量视为错误，就会抛出appenv is not defined。把变量挂到process.env下就能完美解决这个问题。

二、Webpack EnvironmentPlugin的正确用法 #

EnvironmentPlugin是DefinePlugin的封装，适合需要根据启动命令动态切换环境的场景：

1. 配置webpack.config.js #

const webpack = require('webpack');

module.exports = {
  // 其他配置
  plugins: [
    // 传入要注入的环境变量名数组
    new webpack.EnvironmentPlugin(['APP_ENV'])
  ]
};

2. 启动时设置环境变量 #

在package.json的scripts里添加启动命令，根据环境设置变量：

{
  "scripts": {
    // 开发环境
    "start": "APP_ENV=dev webpack serve",
    // 生产环境
    "build": "APP_ENV=prod webpack build"
  }
}

如果是Windows用户，需要改成set APP_ENV=dev && webpack serve；想要跨平台兼容的话，可以安装cross-env包，命令写成：

{
  "scripts": {
    "start": "cross-env APP_ENV=dev webpack serve",
    "build": "cross-env APP_ENV=prod webpack build"
  }
}

3. 在组件中访问 #

同样用process.env.APP_ENV就能拿到对应的值。

三、如果你用Create React App（CRA） #

CRA已经帮你封装好了环境变量的处理，不需要手动配置webpack：

1. 在项目根目录创建.env.development和.env.production文件
2. 在文件里定义带REACT_APP_前缀的变量：
   • .env.development：REACT_APP_ENV=dev
   • .env.production：REACT_APP_ENV=prod
3. 在组件中直接访问：process.env.REACT_APP_ENV

额外注意事项 #

• 用DefinePlugin时，值必须用JSON.stringify()包裹，否则webpack会把它当成变量解析，而不是字符串。
• 如果用ESLint，记得在.eslintrc里把process添加到全局变量，避免警告：

  {
    "globals": {
      "process": true
    }
  }
  

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