[筆記][Vue.js + Webpack] 判斷是否為開發環境

在開發的時候總會有一個需求是想在開發階段做跟生產環境不一樣的事, 像我自己的習慣是在做畫面時, 不見得後端資料和API都已經準備好了, 所以我會先以假的資料(mock data)來取代, 放上線後才是真正去抓server api

因此就會需要一個方法來判斷現在到底是不是在開發階段, 如果使用webpack來開發, 這件事就會變得很簡單, 最近一直在寫Vue.js, 這邊就有Vue.js (反正我也還不懂react.js, 哈)

用vue-cli建立一個以webpack為工作流程的專案很簡單:

vue init webpack my-project

跑完後相關的檔案都幫你產生好了

要在你的程式裡面判斷目前是否是開發環境的話, 只要加入這樣的判斷:

if (process.env.NODE_ENV === 'development') {
  console.log('Hi!You are in dev env')
}

生產環境就把"development"換成"production"就好了

不過實際跑到瀏覽器上時, 如果你在developement console內直接下console.log(process.env.NODE_ENV), 你會發現完全沒這東西, 這是因為process.env.NODE_ENV並不是活在client端, 而是webpack在建置過程(跑在node.js)中動了手腳做了轉換了

那這值是在哪邊被定義呢? 打開"build/webpack.dev.conf.js"這個檔案看, 你會發現:

plugins: [
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),
	...
]

以及"config/dev.env.js":

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})