読者です 読者をやめる 読者になる 読者になる

はらへり日記

腹に弾丸

webpackのDefinePluginとbabel-plugin-transform-environment-variablesの併用には注意

やりたいこと

webpackを使ってフロント用のファイルをバンドルしたい。

そのとき、環境変数に合わせて値を変えたいという場面があった。

ノリ的には以下のようなコード。

if (process.env.NODE_ENV === 'development') {
  console.log('Debug message');
}

この例だと開発か本番かの判定だが、他にもステージングの時はこのAPIのエンドポイント、といったことがしたかった。

ハマった

webpack初心者だったのでこの記事を参考に書いてみた。

細かいところは違うけどほぼ内容一緒なのでコードは割愛。

geta6.hatenablog.com

そしてコンパイルされたコードを見るために以下のように適当にコード書いて動かしてみる。

console.log(process.env.NODE_ENV);

そしてビルドし、吐き出されたコードを見てみる。

npm run buildpackage.json"build": "webpack"とだけ定義してある。

npm run build
node dist/index.js
> undefined

なんで!!!!!!

原因

原因はなんてことなくて、これを併用していたせいだった。

babeljs.io

こいつはBabelでコンパイルする際、環境変数を静的に置き換えてくれる。

WebpackでBundleするとき、内部的な処理順は

という順序になっている。

私はDefinePluginとtransform-inline-environment-variablesを併用、かつビルド実行時に環境変数をexportしていなかったので

  • transform-inline-environment-variablesがprocess.env.HOGEを静的に置き換え(exportされてないのでundefined)
  • DefinePluginが実行(でもprocess.env.HOGEは全部置換済みなので何も起きない)

という感じになっていた。

なのでやり方的には

  • webpack実行時に環境変数にすべてexport & transform-inline-environment-variables
  • transform-inline-environment-variablesは使わずDefinePluginにすべてkey-valueで渡す

の2通り。どっちがいいかは好みや場合によりけりかな…

まとめ

圧縮の道はツライ。