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

时间:2018-10-19 08:05:09

标签: javascript node.js reactjs maven

我是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

下面是我的文件夹结构。

enter image description here

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

10 个答案:

答案 0 :(得分:3)

要将其设置为当前流程执行,只需编辑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

答案 1 :(得分:3)

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

尝试一下...这会将CI设置为false

答案 2 :(得分:2)

签出此软件包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

答案 3 :(得分:2)

您的问题标题与说明中出现的内容完全不同。

要在React中使用环境变量,它们必须以REACT_APP_为前缀。

例如,React应用程序将提取以下内容:

REACT_APP_API_URL=/api

这不会:

API_URL=/api

有关更多信息,请参阅官方文档:

答案 4 :(得分:1)

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

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

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

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

答案 5 :(得分:0)

您似乎需要您的应用程序才能访问process.env变量。

要做到这一点,您有几种选择(其中之一包括使用上面的第三方库,这是一个不错的选择,但是它可以做很多事情)。

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

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

3)在您的应用程序中手动执行一些愚蠢的操作以写入全局变量。也许不用理会。

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

答案 6 :(得分:0)

通过搜索与Bitbucket Pipelines的集成,我遇到了这个问题。

对于其他寻求相同内容的人,您可以在CI下将false作为Settings/Repository Variables添加到仓库中(如果您不希望它成为版本控制代码的一部分)

如果要为您的位存储库中的所有存储库添加它,则可以添加全局设置,但最好是逐个存储库地添加该设置。

答案 7 :(得分:0)

您必须在根目录中创建.env文件,并在该文件中定义变量。请确保每个变量都以REACT_APP_开头,例如REACT_APP_IS_PROD=1

每次更改或创建新变量时,都必须重新启动服务器。

Reference

答案 8 :(得分:0)

创建一个 .env 文件或者 .env.dev,.env.qa,.env.stg ...etc

将以下行添加到该文件中

CI=false

如果你还没有安装 env-cmd,请先安装它并将其包含在 package.json 中

然后在 package.json 的 "scripts" 中添加以下几行

  "scripts": {
    "start": "env-cmd -f .env.dev react-scripts start",
    "build": "react-scripts build",
    "build:dev": "env-cmd -f .env.dev npm run-script build",
    "build:qa": "env-cmd -f .env.qa npm run-script build",
    "build:stg": "env-cmd -f .env.stg npm run-script build",
    "build:prod": "env-cmd -f .env.prod npm run-script build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

然后使用“npm run build:dev”或相应的命令构建

答案 9 :(得分:0)

对于 Windows

set REACT_APP_ENV=development && react-scripts start

适用于 Linux、Ubuntu、MacOs

REACT_APP_ENV=开发反应脚本开始