如何在React JS ..中设置环境变量？

Question

我是React JS的新手。我正在尝试从React App构建war文件，但是卡在下面的某个地方。它给了我下面的错误。

Creating an optimized production build...

Treating warnings as errors because process.env.CI = true.
Most CI servers set it automatically.

Failed to compile.



./src/Home.js
  Line 2:   'AppNavbar' is defined but never used  no-unused-vars
  Line 3:  'Link' is defined but never used       no-unused-vars
  Line 4:  'Button' is defined but never used     no-unused-vars
  Line 4:  'Container' is defined but never used  no-unused-vars

./src/App.js
  Line 5:   'MenuBar' is defined but never used        no-unused-vars
  Line 6:   'PrivilegeList' is defined but never used  no-unused-vars
  Line 8:   'logo' is defined but never used           no-unused-vars


  npm ERR! code ELIFECYCLE
  npm ERR! errno 1
  npm ERR! my-app@0.1.0 build: `react-scripts build`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the my-app@0.1.0 build script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

  npm ERR! A complete log of this run can be found in:
    npm ERR!     D:\ReactJS-workspace\my-app\npm\cache\_logs\2018-10-19T07_44_19_233Z-debug.log
    [INFO] ------------------------------------------------------------------------
    [INFO] BUILD FAILURE
    [INFO] ------------------------------------------------------------------------
    [INFO] Total time: 01:36 min
    [INFO] Finished at: 2018-10-19T13:14:19+05:30
    [INFO] ------------------------------------------------------------------------
    [ERROR] Failed to execute goal org.codehaus.mojo:exec-maven-plugin:1.3.2:exec (npm run build (compile)) on project my-app: Command execution failed.: Process exited with an error: 1 (Exit value: 1) -> [Help 1]
    [ERROR]
    [ERROR] To see the full stack trace of the errors, re-run Maven with the -e switch.
    [ERROR] Re-run Maven using the -X switch to enable full debug logging.
    [ERROR]
    [ERROR] For more information about the errors and possible solutions, please read the following articles:
    [ERROR] [Help 1] http://cwiki.apache.org/confluence/display/MAVEN/MojoExecutionException

下面是我的文件夹结构。

我想设置process.env.CI = false如何在React JS中设置环境变量？

Answer 1

看看这个包dotenv，

1. .env在您的工作目录中创建一个新文件

2. 安装dotenv者npm install dotenv

3. 将此添加到您的应用程序中 require('dotenv').config()

4. 在那个文件中写 process.env.CI = false

5. 添加.env到您的.gitignore[如果使用 git]

6. 重新启动您的应用程序。

或者运行这个 CI=false npm run build

Answer 2

您的问题标题与描述中发生的情况大不相同。

要在 React 中使用环境变量，它们必须以REACT_APP_.

例如，以下内容将被 React 应用程序选取：

REACT_APP_API_URL=/api

而这不会：

API_URL=/api

更多内容请查看官方文档：

Answer 3

您可以在.env文件中设置环境变量

以下是步骤

1. 在项目根文件夹中创建一个名为.env的文件

2. 现在，在添加变量时，您必须添加前缀REACT_APP ，例如：您想为 API 添加 API_URL 变量。所以你必须添加一个带有前缀 RECT_APP 的变量，如下所示

   REACT_APP_API_URL

3. 停止正在运行的服务器并使用 npm start 重新运行

4. 要访问环境变量，您必须调用： process.env.REACT_APP_API_URL

干得好。现在您可以访问环境变量

笔记：

1. 请确保您已添加前缀 (REACT_APP)
2. 请停止您的服务器并重新启动，以便它将加载环境变量（如果添加）

Answer 4

要将其设置为当前流程执行，只需编辑package.json文件并修改“ build”脚本，如下所示：

"scripts": {
"start": "react-scripts start",
"build": "set \"CI=false\" && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject" }

这会将CI环境变量设置为“ false”。现在，您可以在设置CI变量的情况下执行build命令：

npm run build