2018.04.05

Nuxt.jsでIE11対応のPolyfill

Nuxt.js

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

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

babel-polyfill をインストール

$ npm i -D babel-polyfill

nuxt.config.js の build オプションに設定を追記

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 と同様に useBuiltIns を true に指定すると、targets の環境で対応していない機能についてのみPolyfillをインポートしてくれるらしいです。

参考：

できました

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

Nuxt.js