node.js - 如何在特定环境中的开发机器上启动React App?

标签 node.js reactjs npm npm-scripts

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

npm 版本 - 6.8.0

Node 版本 - 10.15.3

我想知道如何在我的开发机器上本地启动我的 ReactApp,就像在生产环境中一样。

我们有多个工作环境,例如测试、暂存、预生产、生产......等,我们希望在不实际部署到目标环境的情况下测试应用程序的行为。

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

我尝试更新 package.json scripts 部分,如下所示。但是,这不起作用。

"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-prodstart-prod2 。尽管它成功托管了应用程序,但它始终处于开发模式。请参阅以下屏幕截图:

npm run start-prod

enter image description here

npm run start-prod2

enter image description here

如果我使用npm run build,它会使用生产环境生成构建。但测试需要太多时间。

您能否指导我如何在我的开发机器中模拟各种环境?

附注我只是使用默认的 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"
  }
}

最佳答案

您无法更改 NODE_ENV 变量:

You cannot override NODE_ENV manually. This prevents developers from accidentally deploying a slow development build to production.

您可以做的是使用不同的 .env 文件: 来自:React documentation

Files on the left have more priority than files on the right:

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)

关于node.js - 如何在特定环境中的开发机器上启动React App?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56533888/

相关文章:

node.js - node-sass-middleware 没有做任何事情

reactjs - Ag Grid 防止列在排序过程中更改

javascript - 为什么会出现错误 : 'should not push route with duplicated key' with NavigationStateUtils in React Native?

node.js - Babel Transpiler 无法与 Nodemon 一起运行

node.js - gatsby 构建在 netlify 上失败并抛出 new ERR_REQUIRE_ESM(filename, ParentPath, packageJsonPath);

javascript - 将参数传递给一个类上调用另一个类的方法的便捷方法

javascript - Discord.js 的 EventEmitter Javascript 限制问题

javascript - 创建自定义休息客户端

node.js - NPM 不更新自述文件

node.js - node.js 和 console.log 中的 connect-flash 之间的区别?