当我运行我的构建过程时，如何配置我的产品环境变量？

Question

我正在构建 React 16.13.0 应用程序。我想根据环境以不同方式配置端点，所以我在组件中设置了它，src/containers/FormContainer.jsx, ...

class FormContainer extends Component {
  static DEFAULT_COUNTRY = 484
  static REACT_APP_PROXY = process.env.REACT_APP_PROXY
    ...

我想在本地构建我的生产项目。但是在本地我已经定义了这个变量

localhost:client davea$ echo $REACT_APP_PROXY
http://localhost:9090

在我运行 "npm run-script build," 之后，我注意到它已编译到我的构建文件中...

(function(e){return e.json()})).then((function(t){console.log(t),n=t.map((function(e){return e})),e.setState({provinces:n})}))}}]),t}(n.Component);S.DEFAULT_COUNTRY=484,S.REACT_APP_PROXY="http://localhost:9090"

有没有办法不让 React 自动解析环境变量，而是从生产环境中获取它？也许我需要调整我的构建脚本？以下是我的 package.json 文件中定义的内容 ...

localhost:client davea$ cat package.json 
{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "jquery": "^1.9.1",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-dom": "^16.12.0",
    "react-native-flash-message": "^0.1.15",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.1",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "proxy": "http://localhost:8000",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

您正在使用反应脚本来构建您的应用程序。您可以在 .env 文件中定义环境变量。

对于节点环境中通用的变量，您可以在 .env 文件中定义它们

对于 development 和 production 的特定变量，您可以在 .env.development 和 .env.production 文件中定义它们

另外请在您的变量前加上REACT_APP

完成后，您可以在 package.json 中添加脚本以指定特定 NODE_ENV

的构建

"scripts": {
    "start": "react-scripts start",
    "build": "NODE_ENV=development react-scripts build",
    "build:prod": "NODE_ENV=production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

然后您可以像

一样在本地构建用于生产的应用程序

yarn run build:prod

并且它将使用生产环境变量

在 create react app 上阅读更多相关信息 documentation

Answer 2

以下步骤可能会有所帮助。试一试：

You can also refer to the original documents for more information:

Adding Custom Environment Variables

第一步：

在项目的根目录中创建 .env 文件

创建 .env 文件后的项目结构：

...
- build
- public
- src
    |----- App.js
    |----- index.js
- package.json
- .env
...

.env 文件内部：（例如）需要前缀 REACT_APP_！

REACT_APP_URL_DEVELOPMENT=http://localhost:8000/api
REACT_APP_URL_PRODUCTION=https://productionDomain.com/api/

第二步：

package.json 文件:

Scripts 无需在 package.json 文件中更改：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "http://myWebsite.com",
  "dependencies": {
    ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

第三步：

最后，您可以有条件地使用您创建的变量。

示例：

class Posts extends Component{
    ...

    componentDidMount(){

      // Finally, you can conditionally use the variables you created.
      const url = process.env.NODE_ENV === "development" ? process.env.REACT_APP_URL_DEVELOPMENT : process.env.REACT_APP_URL_PRODUCTION;

      axios.get(url)
        .then(res => { ... })
        .catch(err => { ... });

    }

    render(){
      return(
        ...
      )
    }
}

常见问题解答部分：

process.env is a global Object provided by your environment through NodeJs. Because we don't have NodeJS in browser. But you can access to NODE_ENV by init your app using create-react-app with webpack included by default and perform the above steps. More details below:

有一个名为 NODE_ENV 的内置环境变量。您可以从 process.env.NODE_ENV 访问它。此变量根据您当前所处的模式而变化。当您运行 npm start 时，它等于 development，当您运行 npm test 时它等于到 test，当你运行 npm run build 它等于 production。这个变量是特殊的，因为它可以用于根据您的模式访问不同的环境配置。

当我运行我的构建过程时，如何配置我的产品环境变量？

How can I configure my prod env vars when I run my build process?

reactjs

npm

environment-variables

npm-scripts

当我 运行 我的构建过程时，如何配置我的产品环境变量？

How can I configure my prod env vars when I run my build process?

reactjs

npm

environment-variables

npm-scripts

当我运行我的构建过程时，如何配置我的产品环境变量？