ionicプロジェクトでnodeの環境変数を使ってビルド環境を切り替えるのにちょっと面倒だった話 #webpack

こちらはあら便利カレンダー2018の記事です。

Webのフロントエンド開発においてwebpackを使ってビルドする場合、NODE_ENV=development npm run buildやNODE_ENV=production npm run buildといった具合にnodeの環境変数を使ってビルド内容を切り替えることはよくあると思います。

ionicもwebpackをベースにビルドが実行されているため、同じようにできると思っていたら出来ず。。
ちょっと面倒なことをしなければならなかったので、記事にまとめました。

ionic関連のバージョンはこんな感じ

"ionic": "3.20.0",
"ionic-angular": "3.9.2",
"@ionic/app-scripts": "3.1.8",

Ionic公式に書いてあるやつ

IONIC_ENVなるものが定義されていてそれを参照することでビルド時に切り替えが出来るよ！って書いてあるのですが、、、
https://ionicframework.com/docs/developer-resources/app-scripts/

if (process.env.IONIC_ENV === 'prod') {
  console.log('we got a production buildp');
} else {
  console.log('we got a development build');
}

webpack.config.js内でしか参照できない！！

さきほどのIONIC_ENVはwebpackのconfigファイル内でしか参照できないです。
JSのソース内でIONIC_ENVを参照しても undefined　が返ってくるだけです。

ionicプロジェクトでnodeの環境変数を使ってビルド環境を切り替える方法

ionicのビルド時に参照するwebpack configを作成して指定する (指定がない場合は@ionic/app-scriptsモジュール内にあるwebpack.config.jsが参照されています)
webpackに内包されているDefinePluginを使ってIONIC_ENVをJSソース内から参照できるよう定義しなおす
npm run buildとかでコマンド実行する

これだけです。

webpack.config.jsを用意する

任意の場所にwebpack.config.jsを用意します。今回はプロジェクトのルートに置いています。
内容は以下のようになっています。

webpack.config.js

const webpack = require('webpack');
// デフォルトで使われているwebpack configを取得
const ionicConfig = require('@ionic/app-scripts/config/webpack.config');

// nodeの環境変数をDefinePluginによって再定義
const definePlugin = new webpack.DefinePlugin({
  IONIC_ENV: JSON.stringify(process.env.IONIC_ENV)
});

// デフォルトのwebpack configにマージ
ionicConfig[ process.env.IONIC_ENV ].plugins.push(definePlugin);
module.exports = ionicConfig;

ionicビルド時に参照するwebpack configを指定する

package.jsonに以下を追記します。

package.json

{
  "dependencies": {
↓↓↓↓↓追加
  "config": {
    "ionic_webpack": "./webpack.config.js"
  }
}

実際にJSソース内から参照

JSのソース内から以下のように参照できます

config.js

    declare const IONIC_ENV: any;

    endpoint: {
      prod: 'https://prod.example.com',
      dev: 'https://dev.example.com'
    }[IONIC_ENV || 'dev']

TypeScriptの型定義が必要なため declare const IONIC_ENV: any; でやってますが、ここをもうちょっとスマートにしたいなーとおもってます。
が、とにかくこれで参照できるようになりました。

IONIC_ENV補足

IONIC_ENVは以下ionicコマンドによって値が切り替わります

ionic build、ionic serveを実行すると dev
ionic build --prod を実行すると prod

ちなみにcordovaのビルド環境切り替えも他の方法で出来るようですが、さらにややこしそうでやってません。。
Ionic公式フォーラムなどでもビルド環境切り替えをもっとシンプルに切り替えられる方法がほしいという内容の投稿が以前からあがっているので、今後のアップデートで変わる可能性はありますが現状ではこの方法が1番最短かと思います。