Ionicにおける環境変数

ずっと環境変数に悩んでいたけれど下記の方の記事が王道かなと試したらちょっとエラーになったのでメモ。

【 Ionic 入門】 Ionicで開発を進める際に知っておかないといけないこと

環境は以下

$ ionic -v
3.13.2

$ ionic info

cli packages:

    @ionic/cli-utils  : 1.13.1
    ionic (Ionic CLI) : 3.13.2

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.0 ios 4.5.1
    Ionic Framework    : ionic-angular 3.7.1

System:

    Android SDK Tools : 26.1.1
    ios-deploy        : 1.9.2 
    ios-sim           : 5.0.6 
    Node              : v7.7.2
    npm               : 4.1.2 
    OS                : macOS Sierra
    Xcode             : Xcode 9.0.1 Build version 9A1004 

Misc:

    backend : legacy

記事通りに書き換えたwebpackをビルドすると下記のようなエラー。

[15:50:46]  transpile started ... 
There was an error in config file "/Users/hoge/ionic-app//webpack.config.js". Using defaults instead.
TypeError: Cannot set property 'alias' of undefined

もとの@ionic/app-scripts/config/webpack.config.jsを見ると最後に環境毎の設定を作るように変わったようです。

module.exports = {
  dev: devConfig,
  prod: prodConfig
}

なので環境ごとのプロパティを参照するように変更した。

var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = function () {
  var env = process.env.IONIC_ENV === 'prod' ? 'environment.prod.ts' : 'environment.ts';
  useDefaultConfig[process.env.IONIC_ENV].resolve.alias = {
    '@app/environment': path.resolve(__dirname, './src/environments/', env)
  };
  return useDefaultConfig;
};

これでビルドは通るようになった。生成物を見る限りちゃんと切り替わってるっぽい。

buildコマンドで–envで自由に設定できたらと思うのだけれど、色々兼ね合いが難しい模様。探すと似たようなチケットがgithubやらフォーラムに散在してる。

ref: Feature request: Ionic 2 (dev/prod) environment variables configuration · Issue #1205 · ionic-team/ionic-cli

とにかくビルド周りは複雑な上に変わっていくのであまり触りたくない。おかげでWebpack周りの挙動がさっぱりな人間なのだが、いい加減ちゃんと見ていかないと簡単な拡張すらできないという。rollupとかもいまいちわかってないんだよなぁ。