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

Question

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

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

要将其设置为当前流程执行，只需编辑您的 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 变量集执行构建命令：

npm run build

Answer 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

Answer 3

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

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

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

REACT_APP_API_URL=/api

而这不会：

API_URL=/api

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

Answer 4

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

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

Answer 5

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

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

参考

Answer 6

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

以下是步骤

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

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

   REACT_APP_API_URL

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

4. 要访问 env 变量，您必须像这样调用： process.env.REACT_APP_API_URL

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

笔记：

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

Answer 7

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

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

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

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

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

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

Answer 8

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

对于寻找相同内容的其他人，您可以在您的Settings/Repository Variables下将CI添加为false （如果您不希望它成为您的版本控制代码的一部分）。

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

Answer 9

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

将以下行添加到该文件

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”或相应的命令构建

Answer 10

对于 Windows

设置 REACT_APP_ENV=development && react-scripts start

适用于 Linux、Ubuntu、MacOs

REACT_APP_ENV=开发反应脚本开始

Answer 11

Github 操作

尝试使用 Github 操作构建和上传网站？

也许您想在您的 Github 存储库\\.github\\workflows\\deploy.yaml创建一个文件并添加类似的内容。

name: Upload Website

on:
  push:
    branches:
      - main

jobs:
  deploy:
    name: Upload Website - deploy
    runs-on: ubuntu-latest

    steps:
      - name: Checkout source code
        uses: actions/checkout@master

      - name: Load AWS credentials from Github Secrets
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: Load dependencies (node_modules)
        run: yarn

      - name: Build site
        run: yarn build
        env:
          CI: false

      - name: Copy files to S3
        run: |
          aws s3 sync ./build s3://my-s3-website-bucket --delete --exclude "*.map" --acl public-read

      - name: Clear Cloudfront cache
        run: |
          aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_DIST_ID }}--paths "/*"

参考：

• https://docs.github.com/en/actions/learn-github-actions/environment-variables

Answer 12

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

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

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

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