Help us understand the problem. What is going on with this article?

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

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

  • 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

エビデンス

image.png

おまけ

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

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

amishiro
5年近く作っていた自作テンプレートから離れて、最近はnuxtで開発してる。フロントエンドの未来は明るい。寂しいのでフォロープリーズ。
https://amiten.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away