mz026's Blog

在 React 的開發工具當中， Webpack 可以說是相當詭譎神妙的一員。
他在某些方面取代了很多本來用 gulp/grunt 做的事情，像是 pre-process, post-process javascript/css 等，但同時也因為它的設定比較複雜，有時候蠻令人頭大的。

我想在這篇文章分享我自己在使用 webpack 的時候，遇到關於 environment variables (環境變數) 的問題和解法。

情境設定：

在開發的時候，我們常常會把一些設定參數、thrid-party service keys 等等的東西放在環境變數裡面 (而不是直接 commit 進去 repository)。像是 API_HOST 的 url，或者是 AWS 的 access key 等等。
所以在我們的程式裡面可能會有以下這樣的做法：

// app.js

var config = require('./config');
var agent = require('superagent');

agent.get(config.apiHost + '/the-api-path');

而其中的 config 檔可能長這樣：

// config.js

module.exports = {
  apiHost: process.env['API_HOST'] || 'http://localhost:3000'
}

如此一來，我們就可以把不同環境的 API_HOST 設定在 environment variable ($API_HOST)裡面，並且給定一個預設的值 (http://localhost:3000)。

但是在把上面的 code 用 webpack build 起來之後，我們發現事情並不是憨人所想的那麼簡單沒有那麼單純。

Webpack v.s. Environment Variables

為了方便說明，我們可以先暫時把上面的 app.js 改成這樣：

var config = require('./config');
console.log(config.apiHost);

這樣我們就可以直接執行 build 好的 code 然後把結果 log 出來。

直接 build 下去

我們如果把上面的 code 直接 build 起來：

$ webpack app.js --output-filename bundle.js

然後接著執行 bundle.js:

$ API_HOST=http://production-api.com node bundle.js

這邊我們預期要得到的結果應該是 http://production-api.com
但實際上的結果卻是 http://localhost:3000

也就是說，bundle.js 在執行的時候，完全不管我們 pass 進去的 environment variable 阿！

在 build 的時候 pass 環境變數

接著我們試著在 build 的當下就 pass environment variable 進去。其實這樣的做法比較接近實際上 deployment 的狀況 (像是在 Heroku 上面設定好相對應的 environment variables, 然後在 server 上面把 code build 起來)

$ API_HOST=http://production-api.com webpack app.js --output-filename bundle.js

然後同樣執行 build 好的 bundle.js

$ API_HOST=http://production-api.com node bundle.js

什麼？！！結果還是一樣阿靠！

執行的結果還是一樣是 http://localhost:3000 而不是我們想要的 http://production-api.com！

在直接把 bundle.js 打開來看之後，我們發現他裡面寫著：

process.env = {};

難怪 pass 什麼東西進去都沒用阿。

DefinePlugin

在經過一番 google 之後，發現原來可以用 webpack 的 DefinePlugin 來解決這個問題。我們新加一個檔案 webpack.config.js：

// webpack.config.js

var webpack = require('webpack');
var envToBeInjected = {
  API_HOST: process.env.API_HOST
};

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(envToBeInjected)
    })
  ]
};

然後再執行上面的 build script:

$ API_HOST=http://production-api.com webpack app.js --output-filename bundle.js

然後再試一下：

$ node bundle.js

耶！終於出現夢寐以求的 http://production-api.com 了。

How It works

上面我們在 webpack.config.js 裡面，用 DefinePlugin 把 process.env 這個變數用

{ API_HOST: process.env.API_HOST }

代換進去。

webpack.config.js 是在 build 時候被執行，這就是為什麼我們要在 build 的時候 pass API_HOST=http://production-api.com 的原因。而在 webpack.config.js 裡特別把 API_HOST 抽出來而不是直接 pass 整個 process.env 的原因是因為，在 server 上面的 environment variables 裡面可能還有其他的東西像是其他 service 要用到的 key 等等。這樣東西還是不要一起 build 進去比較妥當 XD

而 webpack build 好的 bundle.js 是直接把 build 的當下的 environment variable 寫進去，這也是為什麼我們在最後執行 bundle.js 的時候，不需要在另外 pass API_HOST 的原因。