Vue CLI 3プロジェクトでIE対応する #Vue.js

IE対応でこの記事に辿り着いてしまうことがないことを祈りつつも、もし問題にぶち当たった人のために残しておきます。

基本的にはドキュメントに従って行いました。

参考: Browser Compatibility

環境

@vue/cli: 3.3.0
vue: 2.5.21

はじめに

IEで動かない場合は大概ES6+で書いているための構文エラーが原因です。

その解決策として、二つあります。

使っているモジュールで構文エラー or 自分のコード上で構文エラーだが、どのPolyfillを使えばわかる場合
なんかよくわからないけど構文エラーになる場合

1. 使っているモジュールで構文エラー or 自分のコード上で構文エラーだが、どのPolyfillを使えばわかる場合

使っているモジュールがES6などで書かれていて、IEでエラーになって動かなかったりします。

そんな時は原因になっているモジュールをトランスパイル対象に追加する必要があります。

Vue CLI 3ではvue.config.jsの transpileDependencies オプションを指定します。

// vue.config.js
module.exports = {
.
.
.
    transpileDependencies: ['my-module'], // node_modulesにあるトランスパイル対象リスト
}

一方で、どのpolyfillを使えばいいかわかっていれば、個別に追加できます。

// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}

2. なんかよくわからないけど構文エラーになる場合

なにが原因かわからないときは全てのpolyfillをインポートしちゃいましょう。

useBuiltIns オプションを entry にします。

こうすることで、babelではbrowserslist に書かれている環境に関する全てのpolyfillを自動インポートしてくれるようになります。

// babel.config.js
module.exports = {
  presets: [
    ['@vue/app',
      {
        useBuiltIns: 'entry'
      }
    ]
  ],
  .
  .
}

そして、エントリファイルでインポートします。

// src/main.js

import '@babel/polyfill'

.
.

これで対応するブラウザ環境に関する全てのpolyfillをインポートできました。

しかしこのやり方だとアプリケーションで一度も使わないようなpolyfillもインポートしてしまうので、

ビルド後のバンドルサイズが大きくなってしまうという欠点があります。

まとめ

バンドルサイズが気になる場合は、対応する各Polyfillを使うようにして、

気にならない場合は、全てのPolyfillをインポートしちゃってIEについて気にせず開発を進めていけばいいのかと思います。