运行 create-react-app 构建脚本时如何设置构建 .env 变量?

IT技术 reactjs webpack frontend create-react-app react-scripts
2021-04-18 07:47:46

我在 create-react-app 中使用了以下环境变量:

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

当我npm start通过读取.env文件运行时它有效

REACT_APP_API_URL=http://localhost:5555

如何设置不同的值,例如http://localhost:1234执行 a 时npm run build

这是我的package.json文件:

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
5个回答

我想您现在已经可以正常工作了,但是对于发现此问题的其他人,您可以在.env“create-react-app”项目根目录下文件中设置默认环境变量

要分离使用时使用的变量npm startnpm run build您可以再创建两个 env 文件 -.env.development.env.production.

npm start将设置REACT_APP_NODE_ENVdevelopment,因此它将自动使用该.env.development文件,并npm run build设置REACT_APP_NODE_ENVproduction,因此它将自动使用.env.production. 在这些中设置的值将覆盖您的.env.

如果你与其他人一起工作,并有特定的值到你的机器而已,你可以在覆盖原有的数值.env.development.env.production-通过将这些值到一个新的文件.env.development.local,并.env.production.local分别。

编辑:我应该指出您设置的环境变量必须以“REACT_APP_”开头,例如。“REACT_APP_MY_ENV_VALUE”。

编辑 2:如果您需要的不仅仅是开发和生产,请使用env-cmd,如本评论所指定

感谢您提供有关需要从 REACT_APP_ 开始的信息;我遇到了这个问题。
2021-06-09 07:47:46
2021-06-15 07:47:46
@caffeinescript 目前除了“开发”和“生产”之外没有其他任何环境。我有一个非常迂回的解决方法是在 package.json 中添加一个脚本,它设置一个环境变量,表示它的测试模式,即build_testing": "set REACT_APP_ENV=test & react-scripts build,然后有一个 settings.js 文件,其中每个环境变量都有自己的函数,并带有一个 if 语句检查和的内容process.env.REACT_APP_ENV要么返回测试环境的硬编码值,要么返回真实的环境变量。
2021-06-17 07:47:46
另外,不要忘记从 TERMINAL 重新启动应用程序。
2021-06-18 07:47:46
@SebastianBean 它使用 node: 中的 process.env process.env.REACT_APP_API_URI请参阅CRA 文档
2021-06-20 07:47:46

你可以这样使用process.env.NODE_ENV

const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;

您需要拥有REACT_APP_PROD_API_URLREACT_APP_DEV_API_URL设置。

或者,如果生产 URL 始终相同,您可以简化它:

const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL;

Create React AppNODE_ENV在构建时为您设置为“生产”,因此您无需担心何时将其设置为生产。

注意:您必须重新启动服务器(例如npm start再次运行)以检测环境变量更改。

我不知道但希望可以帮助其他没有经验的开发人员的一些愚蠢的事情,package.json需要命令之前定义文件中设置的环境变量react-scripts build才能被检测到,例如REACT_APP_YOUR_VARIABLE=here react-scripts build.
2021-05-28 07:47:46
以为我可以解决这个问题,但这里是github.com/facebookincubator/create-react-app/pull/1344
2021-06-01 07:47:46
如果您“手动”进行 webpack 配置,将有很多方法可以做到这一点。老实说,我不知道它是否“规范”,但这种方式有效,而且不会从 CRA 中退出,所以我喜欢它。
2021-06-04 07:47:46
谢谢。我知道这种方法。您认为这是这种情况的规范解决方案吗?
2021-06-12 07:47:46
我们还考虑在未来添加对特定于环境的 .env 文件的支持。
2021-06-19 07:47:46

如果您想使用单独的 dotenv 文件来构建和/或部署到单独的环境(stage、prod),那么您可以像这样使用env-cmd

npm install --save-dev env-cmd
./node_modules/.bin/env-cmd -f ./stage.env npm build

然后只需相应地更新您的package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:stage": "env-cmd -f ./.stage.env npm run-script build"
  },

然后构建你只需要运行这个 shell 命令:

npm run build:stage
有一个链接到env-cmd这里很有帮助,但 IMO 为不同的 deplozments 使用不同的构建是危险的
2021-05-27 07:47:46
@helt 你能详细说明一下吗?您担心的风险因素是什么?
2021-05-31 07:47:46
这是我能看到的唯一可行的解​​决方案。我不明白(使用默认的 create-react-app 环境变量设置)如何实际创建可以部署到测试或开发的构建文件。npm run build 为生产创建构建文件,但仅此而已,据我所知(我错过了什么,我一定错过了什么?)
2021-06-08 07:47:46
好吧,如果我在构建期间烘焙配置,我必须为每个部署/环境单独构建应用程序。我不能将一个构建移植到另一个环境中,如果我们不想要它(墨菲定律),这会使事情变得复杂。另外,如果为了替换环境变量而必须多次构建,那么对于 CI 来说是相当大的开销。基本上,我偶然发现了so 线程,这大致是我拥有的用例。
2021-06-17 07:47:46
这些是肯定要知道的权衡。但我不认为它们是每个用例中最重要的因素对于某些人来说,每次提交有多个工件可能是可以接受的。替代解决方案也有其自身的缺点:额外的基础设施要求(例如 node.js 服务器),或者容器启动时间明显变慢。IMO,这是一个最适合您的问题。
2021-06-19 07:47:46

安装“env-cmd”包

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "start:qa": "env-cmd -f .env.qa react-scripts start",
    "build:qa": "env-cmd -f .env.qa react-scripts build"
  },

在本地,如果我们想运行 qa 环境,请使用 npm run start:qa

此外,它可以在没有额外依赖的情况下完成:

"scripts": {
  "build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
  "build:staging": "REACT_APP_ENV=staging npm run build",
  "build:production": "REACT_APP_ENV=production npm run build"
},

而拥有.env.staging.env.production因此文件

只是可惜它直接引用了npm。如果我们可以首先捕获调用目标的二进制文件,那么它也可以在通过纱线调用时工作,例如,然后调用该纱线而不是 npm run,那就太好了。
2021-05-31 07:47:46
"build:production": "REACT_APP_ENV=production yarn build" 也能用
2021-06-03 07:47:46
是的,我知道,这就是我使用的 :-) 但是我的同事必须为 npm 添加一个不同的,因为他想使用 npm。无论如何,小问题可能可以通过 TOOL env 参数左右解决。不确定。
2021-06-18 07:47:46