如何在 CRA(Create-React-App) 自定全域變數
我們常常會在 Webpack DefinePlugin 定義許多全域變數,像是 API 網址等等,但如果我們今天使用 Create-React-App 要如何定義全域變數呢?
問題描述
我們想要在 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 下嗎?如果你願意,請賜我掌聲,謝謝!