2018.04.05

Nuxt.jsでIE11対応のPolyfill


🚀 まずは create-nuxt-app でプロジェクト作成

$ npx create-nuxt-app polyfill-sample-app

📥 babel-polyfill をインストール

$ npm i -D babel-polyfill

🎛 nuxt.config.jsbuild オプションに設定を追記

nuxt.config.js
build: {
  babel: {
    presets: [
      [
        'vue-app',
        {
          targets:  { ie: 11 },
          useBuiltIns: true
        }
      ]
    ]
  },
  vendor: [ 'babel-polyfill' ],
  /* 中略 */
}

build.vendor オプションに指定されたパッケージはアプリケーション中で一度だけインポートされます。

Nuxt.js では vendor.bundle.js ファイル内にモジュールを追加できます。このファイルは app バンドルファイルのサイズを小さくするために生成します。外部モジュール(例えば axios など)を使うときにとても便利です。

また、babel-preset-env と同様に useBuiltInstrue に指定すると、targets の環境で対応していない機能についてのみPolyfillをインポートしてくれるらしいです。

参考:

🎉 できました

screenshot.png

IEで未対応の String.includes() が使えています。


<!-- Font Awesome Free 5.0.13 by @fontawesome - https://fontawesome.com --><!-- License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->