React 中的 env-cmd 环境变量

Question

我似乎已经尝试了 env-cmd 命令的各种变体，但无法弄清楚为什么我无法访问变量

我最初遵循本教程 https://www.youtube.com/watch?v=3SH5AQsHypA

但文档已经更改，因此您需要使用命令 -e ，与视频不同，所以我的 package.json 命令读取...

"dev-server": "env-cmd -e dev webpack-dev-server",

任何我的 .env-cmdrc 读取...

{
    "dev" : {
        "BASE_URL" : "development"
    },
    "qa" : {
        "BASE_URL" : "qa"
    },
    "prod" : {
        "BASE_URL" : "prod"
    }
}

但由于某种原因我无法访问 process.env.BASE_URL 。任何帮助是极大的赞赏

Answer 1

Create React App 文档指出，您必须为 .env 文件中的所有环境变量添加 REACT_APP_ 前缀，以便它们可以在代码 process.env.REACT_APP_ 中使用。

尝试

REACT_APP_BASE_URL

而不是 BASE_URL

Answer 2

您需要在环境变量前添加 前缀REACT_APP_，否则，这些变量将被忽略以避免冲突。

文档说将.env文件放在根目录 ( /src) 中，但我设法摆脱了/src/environments/.env.local以及.env.staging和.env.production。

我正在使用env-cmd，我的命令如下：

  "scripts": {
    "start": "env-cmd -f ./environments/.env.staging npm-run-all -p watch-css start-js",
    "start:naked": "npm-run-all -p watch-css start-js",
    "start:local": "env-cmd -f ./environments/.env.local yarn start:naked",
    "start:staging": "env-cmd -f ./environments/.env.staging yarn start:naked",
    "start:production": "env-cmd -f ./environments/.env.production yarn start:naked",
    "start-js": "react-scripts start",
    "build": "npm run build-css && react-scripts build",
    "build:staging": "env-cmd -f ./environments/.env.staging npm run build",
    "build:prod": "env-cmd -f ./environments/.env.production npm run build",
    "build-css": "node-sass-chokidar src -o dist/styles",
    "watch-css": "npm run build-css && node-sass-chokidar src -o dist/styles --watch",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

http://create-react-app.dev/docs/adding-custom-environment-variables/

Answer 3

对于到目前为止感兴趣的任何人。这个问题最终通过使用Dotenv-webpack库解决了

https://www.npmjs.com/package/dotenv-webpack

在你的 webpack 配置文件中；

const Dotenv = require('dotenv-webpack');

将 env 的参数传递给 module.exports

module.exports = (env) => {
 let ENV_CONFIG;

 if(env === 'dev'){
     ENV_CONFIG = new Dotenv({path: './environment/.env-dev'})
 }

 if(env === 'staging'){
     ENV_CONFIG = new Dotenv({path: './environment/.env-staging'})
 }

 if(env === 'production'){
     ENV_CONFIG = new Dotenv({path: './environment/.env-production'})
 }
}

然后在插件中...

plugins : [
    ENV_CONFIG
]

你的 package.json 脚本可能看起来像......

"build:prod": "webpack -p --env production"

然后您应该能够像这样访问 process.env 下的变量；

process.env.SERVER_URL