如何从 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，但是只有当我控制台 process.env.NODE_ENV 时，我的本地 ui 应用程序仍然显示开发。我也试图用同一行设置 NODE_ENV 进行登台，但仍然没有运气。端口设置有效，但应用程序在 3000 和 3003 两个端口中运行。如何摆脱这种情况并通过提供有用的链接或代码来帮助我理解暂存配置很好

Answer 1

根据文档，我们不能覆盖 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 2

我使用 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"
  },

Answer 3

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

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