如何從 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 進行暫存，但仍然沒有運氣。 端口設置正常，但應用程序在 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

在 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 4

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

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