如何从 package.json 设置 NODE_ENV 以进行反应

Question

我正在尝试在执行 React 应用程序时从本地定位多个环境。

1. Development
2. Staging
3. Production

我也在尝试在任何环境中测试离线模式。所以，我配置的脚本如下：

    "staging-server": "nodemon server.js --environment=staging",
    "staging": "concurrently -k  \"npm:staging-server\" \"NODE_ENV='staging' PORT=3003 react-scripts start\"",
    "prod": "npm run build && forever server.js --environment=production"

我可以在我的 Express 中使用 args 获取环境 arg，但是我的本地 ui 应用程序仅在我对 process.env.NODE_ENV 进行控制台时才显示开发。我也试图用相同的行设置 NODE_ENV 进行暂存，但仍然没有成功。 PORT 设置有效，但是应用程序在 3000 和 3003 两个端口中都是运行。

如何摆脱这个？我也想了解暂存配置。

Answer 1

在NODE_ENV前使用cross-env。

npm i -g cross-env

"staging": "concurrently -k  \"npm:staging-server\" \"cross-env NODE_ENV='staging' PORT=3003 react-scripts start\"",

Answer 2

最简单的方法是直接在您的命令中添加它：

"scripts": {
    "start": "./node_modules/.bin/nodemon server.js",
    "start:prod": "NODE_ENV=prod node server.js",
  },

Answer 3

根据文档，我们不能覆盖 NODE_ENV，但可以创建我们自己的自定义变量，以 REACT_APP_ 开头。所以我配置如下：

参考：https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

"staging": "concurrently -k  \"npm:staging-server\" \"cross-env REACT_APP_ENVIRONMENT='staging' PORT=3003 react-scripts start\"",

在我的 UI 应用程序中，我可以通过像这样安慰它来获取它的值： console.log('REACT_APP_ENVIRONMENT => ', process.env.REACT_APP_ENVIRONMENT);

Answer 4

我使用 REACT_APP_STAGE 构建构建并在我的应用程序中将其用作 process.env.REACT_APP_STAGE。

"scripts": {
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
    "start": "REACT_APP_STAGE=local npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    "build-dev": "REACT_APP_STAGE=dev react-scripts build",
    "build-prod": "REACT_APP_STAGE=prod react-scripts build",
    "build-qa": "REACT_APP_STAGE=qa react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

如何从 package.json 设置 NODE_ENV 以进行反应

How to set NODE_ENV from package.json for react

javascript

development-environment

staging

reactjs

create-react-app