Vue CLIで作ったプロジェクトをIE対応する手引

辛かったので書いときます。

IE終わる終わる言ってるし僕もそれを死ぬほど望んでいるんですが、残念ながらまだしばらくIEは生き残りそうですね。
あんま詳しく調べてないですが、[この記事](https://www.atmarkit.co.jp/ait/articles/1503/11/news134.html)をよむ限りでは2029年くらいまで残りうるのかな。

悲報すぎる。

# 前提条件
開発環境はMacです。
普段からIE入ってるWindowsとかで開発してるなら、その時点でほぼこの記事の意味はないと思います。

# IEが動く環境を用意する
僕のMacだと比較的快適に仮想マシンを動かせそうだったので、VirtualBoxでWindowsを動かす道を選びました。

## 仮想マシンをインストールする
https://developer.microsoft.com/ja-jp/microsoft-edge/tools/vms/

Microsoftさんが無償提供してくれているので、それを使いましょう。

ただ、ダウンロードできる仮想マシンの選択肢はちょくちょく変わっているみたいです。
この記事に書いてある仮想マシンがインストールできない場合は、IE11が入っているマシンを選択してください。

なお、Windows7の仮想マシンはNodeのインストールがクソほど大変なのでおすすめしません。

今回は`IE11 on Win81 (x86)`を選択します。

VMプラットフォームの選択では`VirtualBox`を選びます。

そしてzipファイルをダウンロード => 解凍します。
なお、zipファイルは普通に数GBあります。

解凍に[The Unarchiver](https://theunarchiver.com/)というソフトをオススメされますが、解凍できるなら何でもいいです。

## VirtualBoxをインストールする
利用バージョン: 6.1.4 r136177 (Qt5.6.3)

ここは大した話じゃないと思うので、[公式](https://www.virtualbox.org/)からインストールしておいてください。

## VBに仮想マシンをインポートする
VB初期状態だと、画面上部に「インポート」ボタンがあると思うのでそれをクリックしましょう。

インポート画面が開くので、ファイル選択ボタン(フォルダのマークっぽいちっこいやつ)をクリックして、先程回答したWin仮想マシン(.ovfファイル)を選択します。

インポートにはしばらく時間がかかります。

## 仮想マシンの設定 & スタート
基本的に初期状態で問題ないと思われますが、個人的に下記は変更しました。

CPU: 2つ
ビデオメモリー: 50MB

大したこだわりがあるわけではないです。
動作が早くなると嬉しいなくらい。

設定し終わったら、画面左に出ている仮想マシンリストから、今インポートしたものをダブルクリックしましょう。

Windowsが起動します。

# 開発環境を準備する
Windowsでローカル開発環境を作ります。
とはいえ大した作業はしないので、取り敢えずプロジェクトを「引っ張ってきて」「動かす」ことができるような最低限の環境を作ります。

## Gitのインストール
[公式](https://git-scm.com/)からインストーラーを入れます。

めっちゃたくさん聞かれますが、ほぼデフォルトのままで良いと思います。

ひとつだけ、`Select Components`の画面で、`Additional icons`を選択しておくと、
デスクトップ画面にGitbashのアイコンが勝手にでるのでオススメです。

GitbashはGitに付属してくるアプリケーションで、Linuxコマンドが使えます。
Bashなんでそりゃそうですが。

Windowsよく知らないしPowerShellもよく知らんので、ここからはGitbashを使って作業を進めます。

## Nodeのインストール
普通に[公式](https://nodejs.org/en/download/)からインストールしました。
現時点でのLTSが14.15.0で、Windows Installer入れたら特に支障なく動いたのでラッキー。

こちらもほぼデフォルトでOKですが、`Tools for Native Modules`の画面だけ、人によってはチェック入れておく必要があります。

CやらC++で作られたパッケージをインストールしたい場合には、追加でPythonやらVS Build Toolsやらを入れる必要があるので、そいつらを一緒にインストールするかどうかを決めます。

僕は後で入れるのめんどくさいので取り敢えず入れときました。

ただしこれを選択すると、インストール完了にそこそこ時間がかかるのでご注意を。

## リモートからソースコード持ってくる
Gitbashを開きましょう。

ホームディレクトリで

```shell
$ mkdir test && cd $_ && git clone <project-url>
```

します。

初めてgit cloneすると、githubとの連携を求められます。 (僕の場合github使っているので)
サインインするとcloneが再開されます。

## npm i
しましょう。

この時点でnpmコマンド見つからねーみたいなのが出たら、gitbashを再起動してください。
PATHが通ってないと思われます。

## npm run serve
します。

立ち上がりましたか？

## IEで確認する
IE開いて、`https://localhost:8080`見てみましょう。
画面右クリックで出るメニューから、`要素を検証`的な英語を見つけてクリックします。

デベロッパーツールが開きますね。

もし不具合が出てる場合、その状態で再度リロードかけるとコンソールに色々出てくるはずです。

# 何を対応すべきか
基本的にはIEが解釈できないJavaScriptがバンドルに含まれてしまっていることが問題なので、バンドルされる前にBabelをかましてあげれば問題ありません。

ただし問題点が2つあります。

1. デフォルトだとコンソールに表示されてるエラー部分が`eval()`なのでどこが問題なのか見づらい
2. デフォルトだとnode_modules以下のパッケージはトランスパイルされない

これらを解決します。

## ソースマップを作成する
ソースマップは、トランスパイル後のソースコードとそれ以前のソースを結びつけるものです。
これがあることで、ブラウザのデベロッパーツールでのエラー箇所の確認が容易になります。

Vue CLIプロジェクトでこれを実行するにあたり、下記の設定を行ってください。

```vue.config.js
modules.export = {
  configureWebpack: {
    devtool: "source-map"
  }
}
```

Vue CLIのバージョンによっては設定の箇所が異なることもあるようなので、詳細は下記を確認してください。

[Vue Docs](https://jp.vuejs.org/v2/cookbook/debugging-in-vscode.html#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%A7%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B)

## ブラウザで問題箇所を発見する
ソースマップの設定ができたら、プロジェクトを再ビルドします。

一旦現行のプロセスを切り、再度`npm run serve`しましょう。

ビルドできたらブラウザをチェックします。

引き続きエラーは出ていると思うので、どのファイルでエラーが出ているのか確認しましょう。

ソースマップ作成前と異なり、どのモジュールで問題が発生しているのかが容易に分かるようになっていると思います。

## 対象のnode_modulesをトランスパイル対象に入れる
Vue CLIプロジェクトでは、ソースマップの設定と同様に`vue.config.js`でこの設定を行います。

```vue-config.js
module.exports = {
  transpileDependencies: ["query-string", "split-on-first", "strict-uri-encode"]
}
```

上記配列の中に、node_modules名を入れればOKです。

問題のあるモジュールを見つけるのは面倒ですが、一つ一つ見つけて追加していきましょう。

# TL;DR
- VirtualBoxでIE入りWindows仮想環境を作成
- 仮想Windows内でローカル開発環境を構築
    - Gitインストール
    - Nodeインストール
- vue.config.jsに`devtool`, `transpileDependencies`の項目追加
- `transpileDependencies`にトランスパイル対象のモジュールを逐一追加
- IEで動くようになったら対応完了！

二度とやりたくない。

もっといいやり方あるよ、って方がいたらぜひ教えて下さいm(_ _)m