如何像在特定环境中那样在开发机器上启动React App？

Question

我们正在使用Microsoft Windows进行开发和托管。

npm版本-6.8.0

节点版本-10.15.3

我想知道如何像在[[Production环境中一样，在开发机器上本地启动ReactApp。

[我们有多个工作环境，例如测试，登台，PreProd，Prod ....等，我们想测试应用程序的行为，而无需实际部署到目标环境。

通过使用process.env.NODE_ENV检查不同的环境，我们在源代码中有了一些逻辑语句。

我尝试如下更新package.json

脚本

部分。但是，它不起作用。

"scripts": {
    "start": "react-scripts start",
    "start-prod": "cross-env NODE_ENV=production react-scripts start",
    "start-prod2": "set NODE_ENV=production&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

我尝试了start-prod和start-prod2。即使成功托管了应用程序，它始终处于
development

模式。请查看以下屏幕截图：npm run start-prod

npm run start-prod2

[如果使用npm run build，它将使用生产环境生成生成。但是需要太多时间进行测试。
您能否指导我如何在开发机器中模拟各种环境？
P.S。我只是使用默认的create-react-app脚本设置，并且没有任何自定义的webpack配置文件。
完整的package.json文件
{
  "name": "react-workout-diary",
  "version": "0.10.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.18",
    "@fortawesome/free-brands-svg-icons": "^5.8.2",
    "@fortawesome/free-regular-svg-icons": "^5.8.2",
    "@fortawesome/free-solid-svg-icons": "^5.8.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "es6-object-assign": "^1.1.0",
    "es6-promise": "^4.2.6",
    "formik": "^1.5.7",
    "has-value": "^2.0.2",
    "is-empty": "^1.2.0",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-datepicker": "^2.6.0",
    "react-delay": "^0.1.0",
    "react-dom": "^16.8.6",
    "react-moment": "^0.9.2",
    "react-redux": "^7.0.3",
    "react-router-dom": "^5.0.0",
    "react-scripts": "^3.0.1",
    "react-toastify": "^5.2.1",
    "reactstrap": "^8.0.0",
    "redux": "^4.0.1",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-saga": "^1.0.2",
    "redux-saga-routines": "^3.1.3",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "uuid": "^3.3.2",
    "yup": "^0.27.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "start-prod": "cross-env NODE_ENV=production react-scripts start",
    "start-prod2": "set NODE_ENV=production&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "cross-env": "^5.2.0",
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "^1.13.2",
    "enzyme-to-json": "^3.3.5",
    "react-test-renderer": "^16.8.6",
    "redux-saga-test-plan": "^4.0.0-beta.3"
  }
}

Answer 1

您无法更改NODE_ENV变量：

您不能手动覆盖NODE_ENV。这样可以防止开发人员不小心将缓慢的开发版本部署到生产中。

您可以做的是使用不同的.env文件：发件人：React documentation

左侧文件的优先级高于右侧文件的优先级：

npm start: .env.development.local, .env.development, .env.local, .env
npm run build: .env.production.local, .env.production, .env.local, .env
npm test: .env.test.local, .env.test, .env (note .env.local is missing)