Parcel+Svelte3で
IE11対応

2021-04-12

Parcel+Svelte3でIE11対応少し手間取ったので備忘録

まずParcelでSvelteをコンパイルするには以下のプラグインが必要です。

Parcelではparcel-plugin-*という名前のパッケージを自動的にプラグインとして読み込んでくれるみたいなのでnpmインストールするだけでSvelteはコンパイルされます。

また、IE対応も@babel/preset-envを導入してpackage.json.browserslistrcに対応するブラウザを列挙することで対応されます。

これだけではIE11で死ぬ

簡単!と思ったが残念ながらこれだけではIE11には対応できませんでした。

issueを漁ったら以下のコメントを見つけました

ここで紹介されているpostinstall.jsを見ると、node_modules内のbrowserslistを更新する必要があるみたいですね・・・
これは改善されてほしい

polyfillも必要

最後にpolyfillも必要でしたので追記
npm i -D @babel/polyfillで導入してコード内でrequireしましょう

import "@babel/polyfill"

ここまででIE11で動作確認できました。

Sapperでよくない?

今回はペライチのページを作るためにParcel+Svelte3を利用したケースですが、Sapperのexportでレガシー指定することでIE対応されるのでそちらの方が基本的には良いと思います。
しかし、Wordpressテンプレートに変換する前提のコーディングであればSapperが出力するHTMLよりParcelで作る方が扱いが楽じゃないかな?という個人的な感覚です。
(そもそもSapper exportでno-minifyってできるんだろうか?)