如何在 CRA(Create-React-App) 自定全域變數

我們常常會在 Webpack DefinePlugin 定義許多全域變數，像是 API 網址等等，但如果我們今天使用 Create-React-App 要如何定義全域變數呢？

Photo by Tracy Adams on Unsplash

問題描述

我們想要在 Application 中定義 API 網址，但不想要寫死，可以依照環境給不同的網址。

解決辦法

Webpack

如果你使用 Webpack，也自己寫設定檔，那麼你可以使用 webpack.definePlugin 來定義全域變數

// webpack.config.js
new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1',
  'typeof window': JSON.stringify('object'),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
});
// use variables
if (!PRODUCTION) {
  console.log('Debug info');
}

只要定義全域變數了，在程式裡面就可以直接使用！(大小寫需要一樣)

更多詳細內容請看：definePlugin

CRA

這邊以 CRA v2.1 以後的版本為範例

如果你使用 Create-React-App 作為專案基礎，Webpack 設定檔被封裝在裡面，沒辦法手動修改要怎麼辦呢？

Facebook 已經幫你想到這點，當然也保留了修改的方式，只要在專案根目錄中增加一個 .env 檔案，就可以定義全域變數了！

APP_URL=myapp-api.com

如果你的定義跟我上方一樣 …

console.log('APP_URL', APP_URL) // APP_URL undefined

你會發現為什麼結果是天殺的 undefined ！？

因為 CRA 有制定一個規則是

只能定義 REACT_APP 開頭的變數，而且預期你會使用 process.env 開頭

所以我們必須把設定檔改為

// .env
REACT_APP_URL=myapp-api.com
// use
console.log('REACT_APP_URL', process.env.REACT_APP_URL)
// REACT_APP_URL, myapp-api.com

這樣就會是我們預期的結果了！

那 CRA 要怎麼定義多個變數定義檔？

如果我們需要不同的環境有不同的設定

CRA 提供了你幾個選擇：

• .env ：預設檔案。
• .env.local ：本機的設定檔，除了測試其他都可以使用。
• .env.development、 .env.test 、 .env.production ：根據開發、測試或正式環境的設定檔。
• .env.development.local 、 .env.test.local 、 .env.production.local ：本機根據環境的設定檔，可以被優先讀取設定。

指令對應設定檔的優先順序如下：

• 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 (注意：這邊沒有 .env.local 的設定檔)

更多詳細設定請看：Adding Custom Environment Variables

這樣就可以解決問題囉！那麼，我們下次見！

Hi 我是 Ryan，如果這篇文章有幫助到你，請你不吝嗇的給予我鼓掌，那將是我進步的動力！👏

另外，你知道 Medium 一篇文章拍手其實可以拍 50 下嗎？如果你願意，請賜我掌聲，謝謝！

Chih-Chien(Ryan) Hsu - ITC - Xuenn Pte Ltd | LinkedIn