如何在開發模式而不是生產模式下部署 create-react-app 網站

Question

我正在為我和我的團隊創建的 chrome 開發工具制作登錄頁面。 我們的登陸頁面包含一個沙箱，旨在讓訪問者測試我們的開發工具。 部署后，我們意識到開發工具不適用於沙箱，因為沙箱是在生產模式下部署的（縮小/丑化組件名稱，無法訪問纖維樹渲染屬性）。 我已經看到其他帖子討論了在開發模式下部署的性能問題，我並不關心這些問題，這表明這是可能的。 我們的應用程序使用 Webpack 構建包，並使用 Netlify 進行部署。 網站本身是用 React/Recoil 構建的。

為了以防萬一，這里有一個指向我們的 repo 的鏈接：

https://github.com/open-source-labs/Recoilize

Answer 1

為任意構建環境自定義環境變量您可以通過創建自定義 .env 文件並使用 env-cmd 加載它來創建任意構建環境。

例如，要為暫存環境創建構建環境：

1. 創建一個名為 .env.staging 的文件

2. 像設置任何其他 .env 文件一樣設置環境變量（例如 REACT_APP_API_URL=http://api-staging.example.com）

3. 安裝 env-cmd

   npm install env-cmd --save

   或者

   紗線添加 env-cmd

將新腳本添加到您的 package.json，使用您的新環境構建：

{
  "scripts": {
    "build:staging": "env-cmd -f .env.staging npm run build"
  }
}

現在您可以運行 npm run build:staging以使用臨時環境配置進行構建。 您可以以相同的方式指定其他環境。

.env.production 中的變量將用作后備，因為 NODE_ENV 將始終設置為構建的生產。