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

How to set environment variable in React JS..?

提问by Developer Desk

I am new to React JS. I am trying to build war file from React App but stuck somewhere below. It gives me below errors.

我是 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! [email protected] build: `react-scripts build`
  npm ERR! Exit status 1
  npm ERR!
  npm ERR! Failed at the [email protected] 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\_logs18-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

Below is my folder structure.

下面是我的文件夹结构。

I want to set process.env.CI = falsehow to set environment variable in React JS?

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

采纳答案by Héctor Espí Hernández

To set it for current process execution, just edit your package.json file and modify the "build" script as follows:

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

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

This will set CI environment variable to "false". Now you can execute the build command with CI variable set:

这会将 CI 环境变量设置为“false”。现在您可以使用 CI 变量集执行构建命令：

npm run build

回答by Enda Phelan

Your question title is very different to what is happening in the description.

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

To use environment variables in React, they must be prefixed with REACT_APP_.

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

For example, the following will be picked up by a React application:

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

REACT_APP_API_URL=/api

REACT_APP_API_URL=/api

Whereas this won't:

而这不会：

API_URL=/api

API_URL=/api

For more, please see the official documentation:

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

回答by Atishay Jain

check out this package dotenv,

看看这个包dotenv，

1. create a new file .envin your working directory

2. install dotenvby npm install dotenv

3. add this to your app require('dotenv').config()

4. in that file write process.env.CI = false

5. add .envto your .gitignore[if using git]

6. restart your app.

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

2. 安装dotenv者npm install dotenv

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

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

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

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

OR run this CI=false npm run build

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

回答by Slack

It looks like you need your app to have access to process.env variables.

看起来您需要您的应用程序访问 process.env 变量。

To do that, you have several options (one of which includes using a third party library above, which is a good option, but it's doing multiple things).

要做到这一点，您有多种选择（其中一个包括使用上面的第三方库，这是一个不错的选择，但它有多种用途）。

1) Set environment variables in your launch command, Example: CI=travis npm start. In this case, you'll have access to process.env.CIin your app.

1) 在您的启动命令中设置环境变量，例如：CI=travis npm start. 在这种情况下，您将可以访问process.env.CI您的应用程序。

2) Set environment variable in your, you know, environment. If you're on Mac or Linux, simply add an environment variable, as you normally would that your shell will export. Check with echo $VAR

2）在您知道的环境中设置环境变量。如果您使用的是 Mac 或 Linux，只需添加一个环境变量，就像通常情况下您的 shell 将导出一样。检查echo $VAR

3) Manually do something stupid in your app to write to globals. Probably don't bother.

3）在你的应用程序中手动做一些愚蠢的事情来写入全局变量。应该不会介意吧。

4) Just use .dotenv. What it does isn't really complicated, but it offers a solution that is almost must have on most projects, for multiple reasons.

4) 只需使用 .dotenv。它所做的并不复杂，但出于多种原因，它提供了大多数项目几乎必须具备的解决方案。

回答by Ashvin777

Create a file with name .eslintrcin your root folder and add below rules in that file -

.eslintrc在根文件夹中创建一个具有名称的文件，并在该文件中添加以下规则 -

{
    "rules": {
        "no-unused-vars": "off"
    }
}

This will disable the strict check for eslint rule no-unused-vars. You can add more rules in this file if you want to disable those also.

这将禁用对 eslint 规则的严格检查no-unused-vars。如果您还想禁用这些规则，您可以在此文件中添加更多规则。

For more details follow the guide - https://eslint.org/docs/user-guide/configuring

有关更多详细信息，请遵循指南 - https://eslint.org/docs/user-guide/configuring

回答by timhc22

I arrived at this questions from searching for integration with Bitbucket Pipelines.

我通过搜索与 Bitbucket Pipelines 的集成来解决这个问题。

For anyone else looking for the same, you can add CIas falseunder Settings/Repository Variablesfor your repo (if you don't want it being part of your version controlled code).

为别人寻找同样的，你可以添加CI作为false下Settings/Repository Variables你的回购协议（如果你不希望它成为你的版本控制代码的一部分）。

If you want to add it for all your repos in your bitbucket, you would add in your global settings, but probably best to add this one on a repo by repo basis.

如果您想为 bitbucket 中的所有存储库添加它，您可以添加全局设置，但可能最好逐个存储库添加此设置。

回答by Bejo Jeffrin

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

Try this ...This will set the CI to false

试试这个...这会将 CI 设置为 false