Vite × ReactのプロジェクトをIEで動かす

はじめに

この記事は、Vite × ReactのプロジェクトをIEで動かすための設定手順を記載しています。

使用するのは以下の2つ。

• @vitejs/plugin-legacy: viteのプラグイン
• core-js/actual: poryfillを提供するライブラリ

以下に、それぞれの利用方法とビルドまでの流れを記載しています。

@vitejs/plugin-legacy

@vitejs/plugin-legacyは、viteのプラグインで、vite.config.jsonに設定を追記することで利用できます。

Step1 @vitejs/plugin-legacyのインストール

npm i @vitejs/plugin-legacy

関連ライブラリのインストール

terserが必要なので、そちらもインストール

npm add -D terser

Step2 vite.config.jsで設定を記述

2-1 ターゲットブラウザの指定

vite.config.js

import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
}

2-2 個々のポリフィルを指定して導入

デフォルトでは、上記のtargetsに指定したブラウザに対応するporyfillのchunkが生成されますが、うまくいかない場合は、polyfillsやmodernPolyfillsで、個々のporyfillを指定します。

個々のpolyfillの指定方法は、公式ドキュメントで以下のように説明されています。

Polyfill specifier strings for polyfills and modernPolyfills can be either of the following:

• Any core-js 3 sub import paths - e.g. es/map will import core-js/es/map
• Any individual core-js 3 modules - e.g. es.array.iterator will import core-js/modules/es.array.iterator.js

vite.config.jsonの例👇

vite.config.js

import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
      polyfills: ['es.promise.finally', 'es/map', 'es/set'],
      modernPolyfills: ['es.promise.finally'],
    }),
  ],
}

このように、必要なporyfillを一つひとつ指定して追加していく方法もありますが、「必要なporyfillを判別する」こと自体なかなか大変な作業です。
いちいちporyfillを調べて追加するのが面倒な場合は、後述するcore-jeを利用することで、包括的にporyfillを導入することができます。

core-js

core-jsで提供されているporyfillの種類は多々ありますが、今回はcore-js/actualを利用します。
core-js/actualは、現在使用されている標準JavaScriptを、包括的に網羅しています。
公式ドキュメントには、以下のように説明されています。

polyfill all actual features - stable ES, web standards and stage 3 ES proposals:

導入方法はシンプルで、インストール後、アプリケーションのエントリーファイルにimport文を記述するのみです。

Step1 core-jsのインストール

npm i core-js

Step2 エントリーファイルにimport文を記述

アプリケーションのエントリーファイルに以下のimport文を追加。

main.tsx

import core-js/actual

ビルド

上記のvite-plugin-legacyとcore-jsの設定ができたら、以下のコマンドでビルドを実行。

vite build

生成されたdistフォルダ内に、index-legacy-XXXXX.jsと、poryfills-legacy-XXXXX.jsが生成されていればOK。これらのファイルがIEで動かす時に利用されます。

詳細は、以下の記事が参考になります👇

最後に

Viteの設定では、build.targetを指定することができますが、最も低いターゲットは es2015(es6)なので、IEはこの設定で対応することはできません。※IE11はes5までしか対応していません。 ...(´ºωº｀)IEｯﾃﾌﾙｲﾈ..

最後まで読んでいただきありがとうございます。 ( ᵕᴗᵕ )ﾉ