0

我想在我的 React 16.13 项目中连接两个生产风格的构建。一个用于测试环境，另一个用于生产。我已经配置了以下脚本...

  "scripts": {
    "start": "react-scripts start",
    "build": "NODE_ENV=development react-scripts build",
    "build:test": "NODE_ENV=test react-scripts build",
    "build:prod": "NODE_ENV=production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

我定义了这两个 .env 文件...

localhost:client davea$ cat .env.test 
REACT_APP_PROXY=http://lab.mydomain.com

davea$ cat .env.production 
REACT_APP_PROXY=http://prod.mydomain.com

我按如下方式运行构建以进行测试...

localhost:client davea$ npm run build:test

> client@0.1.0 build:test /Users/davea/Documents/workspace/chicommons/maps/client
> NODE_ENV=test react-scripts build

Creating an optimized production build...
Compiled with warnings.

./src/containers/FormContainer.jsx
  Line 112:31:  Unnecessary escape character: \[  no-useless-escape

./src/components/Flash/index.js
  Line 26:45:  Expected dot to be on same line as property  dot-location

./src/components/CoopTypes.jsx
  Line 52:9:  Do not mutate state directly. Use setState()  react/no-direct-mutation-state

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  92.83 KB  build/static/js/2.05641348.chunk.js
  22.47 KB  build/static/css/2.af3c1da9.chunk.css
  4.07 KB   build/static/js/main.367658f7.chunk.js
  1.26 KB   build/static/css/main.dcf9a285.chunk.css
  774 B     build/static/js/runtime-main.8c40394c.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy

但是，当我扫描“build/static/js/main.367658f7.chunk.js”（构建文件）后，它只引用了我的生产属性“prod.mydomain.com”而不是测试属性“lab .mydomain.com”。我还需要做什么才能将我的测试属性合并到我的构建中？

4

1 回答 1

0

更新

我们如何仍然使用.env文件？

我们可以使用类似env-cmd. 它将帮助我们使用我们提供的 env 文件执行命令。我们可以在本地或全局安装它。

因此，以下内容保持不变。

localhost:client davea$ cat .env.test 
REACT_APP_PROXY=http://lab.mydomain.com

davea$ cat .env.production 
REACT_APP_PROXY=http://prod.mydomain.com

现在，构建命令可以是（假设 global env-cmd）

"build:test": "env-cmd -f .env.test react-scripts build",
"build:prod": "env-cmd -f .env.production react-scripts build",

对于 local env-cmd，您可以执行./node-modules/.bin/env-cmd -f .env.test其 README 文件中提到的类似操作。

原始答案

来自react-docs，（正如评论中所述的 DCTID ）

您不能NODE_ENV手动覆盖。

但是，由于我们想要变量的两个不同值，我们可以使用自定义变量而不是NODE_ENV? 根据文档，它必须以REACT_APP_. 假设我们决定使用REACT_APP_ENVIRONMENT.

我们可以在构建命令上设置相同的值，例如：

"build:test": "REACT_APP_ENVIRONMENT=test react-scripts build",
"build:prod": "REACT_APP_ENVIRONMENT=production react-scripts build",

并且，以下列方式使用它：

// File: config.js
export const REACT_APP_PROXY = process.env.REACT_APP_ENVIRONMENT === 'production' ? 
  'prod.mydomain.com' : 'lab.mydomain.com';

希望有帮助！我在我的应用程序中以这种方式使用它，所以如果您还有任何问题，我很乐意提供帮助。

于 2020-07-01T05:49:40.290 回答