nuxt.js(v2)でIE11対応をする（JS編）

4153 ワード
Vue.js babel IE11 nuxt.js IE11 テキストリンク

■動作確認済みバージョン

  • nuxt.js(2.11.0)
  • create-nuxt-app(v2.12.0)

■更新履歴

  • 2020/2/5 最新のバージョンに合わせてリライトしました。
    • .browserslistrcファイルが使えるようになりました。
    • お勧めのpolyfill設定方法を追記しました。

特に設置の必要はありません（cool!）。以下に、確認・変更のポイントを記載します。

対応ブラウザの確認方法

対応ブラウザは「browserslistパッケージ」で確認します。ターミナルで% npx browserslistを実行してください。

terminal
% npx browserslist

ディフォルト設置の対応ブラウザ
↓
and_chr 79
and_ff 68
and_qq 1.2
and_uc 12.12
android 76
baidu 7.12
chrome 79
chrome 78
chrome 49
edge 18
edge 17
firefox 72
firefox 71
firefox 70
firefox 68
ie 11
ios_saf 13.3
ios_saf 13.2
ios_saf 13.0-13.1
ios_saf 12.2-12.4
kaios 2.5
op_mini all
op_mob 46
opera 64
opera 63
safari 13
safari 12.1
safari 5.1
samsung 10.1
samsung 9.2

Tips:browserslistパッケージはNuxt.js導入時にインストール済みです。% npm ls browserslistを実行しても見つからない場合は、% npm i -D browserslistを実行してインストールしてください。

対応ブラウザを変更

ルート(package.jsonと同階層)に「.browserslistrc」ファイルを作成し、ディフォルト(defaults)、他必要な設定を追加してください。設定方法は公式ドキュメントを参照してください。

.browserslistrc
defaults
android>=4.4
not IE 11

Tips:ディフォルト（defaults）の設定は、> 0.5%, last 2 versions, Firefox ESR, not deadです。

Tips:Nuxt.jsのバージョンが古いなどの理由により、.browserslistrcファイルが無効になる場合があります。package.jsonの利用も検討してください。

package.json版の記載例

package.json
{
  ...
  "browserslist": [
    "defaults",
    "android >= 4.4",
    "not IE 11"
  ],
  ...
}

polyfill.ioからpolyfillを読み込む

polyfill.ioで生成したURLを、nuxt.config.jsのheadプロパティーから読み込みます。

↓

nuxt.config.js
export default {
  head: {
    script: [
      { src: '//polyfill.io/v2/polyfill.min.js?features=WebAnimations,IntersectionObserver' }
    ],
  },
...

Tips:追加で必要になった場合は?features=の後にコンマ区切りで追記します。
Tips:polyfill.ioは、ブラウザに適したpolyfillのみを返します（cool!）。

動作確認

ディフォルトのままで、arrow関数がIE11で動作するか確認します。

.browserslistrc
defaults

エビデンス

おまけ

Nuxt.jsのバージョンが上がり、気がついたら「.browserslistrc」ファイルが動作するようになってました。また、polyfill.ioがこんなに便利だったとは知らなかった。汗

より、シンプルに生きられるようになりました。