新しい現場になって初めてのIE対応でパニクったためメモ…。
vue.jsのコードをwebpackで出力したらIEでこけた
結果として、これはvue.jsのせいではなかったです。
社内で途中まで組まれていたコードを引き継いだため、IEで対応してないjavascript関数が使われていたことに気づかなかったのです。しかしながら、なぜデバッグにこんなにもてこづったのか反省があるので書いていきます。
症状
vue.jsのソースコードをwebpackで出力したpacked.jsを読み込ませたところ、vueレンダリング部分、またそれ以外のDOM要素も一部表示できていませんでした。
デベロッパーツールから見てもエラーメッセージがでない
IEにもデベロッパーツールがあります。しかし、このバグが出たときはなんのエラーメッセージも出力されませんでした。vueコンパイルに失敗したとかそういうこともありません。
対応
polyfillを読み込む
先輩エンジニアが教えてくださいました。とりあえずpolyfill読み込めばなんくるないさと。
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script>
この一行をHTMLに追加。理由はよく分からないですがコレでエラーメッセージが表示されるようになりました！polyfill.io、今後もう少し勉強する必要がありそうです。
includes()がないってエラー
エラーメッセージが表示されるようになりましたが、includes関数がないよって言われるだけで場所は教えてくれない不親切設計。今回はコードの変更箇所ファイルをシラミ潰しに当たりました。
やはりpacked.jsから吐かれているようなので、とりあえずpacked.jsを直接書き換えました。indexOf()の比較に置換します。
from()がないってエラー
やはり同じファイルから吐かれているため、配列のベタがきに置換します。
とりあえず動いた！原因究明へ…
しかしコレはそもそもwebpack出力前のコードに問題があるのでは？ということで、vueのソースコードを確認。するとありました。includes()とfrom()が。
コレらはwebpackで出力される内部処理でbabelによってコンパイルされるとかなんとかってことらしいですが、元のソースコードでincludesとか使うとそのまま出力されてしまうのですね。ソースコードからincludesとfromを消し去った後、再度webpack出力したところ無事動くようになりました。
今後調べたい
BabelにIE非対応の関数を置き換えてくれるとかいうオプションはあるのだろうか…。これも今後調べたいところです。