为什么我的 npm build for test 会获取生产属性？

Question

我想在我的 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”。我还需要做什么才能将我的测试属性合并到我的构建中？

Answer 1

更新

我们如何还能使用 .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

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

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

对于本地 env-cmd，您可以按照他们的 README 文件中所述执行类似 ./node-modules/.bin/env-cmd -f .env.test 的操作。

原回答

来自react-docs，（正如DCTID也在评论中指出的那样）

You cannot override NODE_ENV manually.

但是，既然我们想要两个不同的变量值，我们可以使用自定义变量而不是 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';

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

为什么我的 npm build for test 会获取生产属性？

Why is my npm build for test picking up production properties?

npm

reactjs

npm-build

更新

原回答