Riot.js v4 レガシーブラウザに対応させよう #JavaScript

個人的にriotのv4は中規模のプロジェクトでも使いやすくなった感じがしますが、公式でieに対応していないためなかなか仕事で導入しにくいです
今のところ自分のプロジェクトではこれで問題なく動いてますが、まだ十分に検証していないので注意

まずはparcelで最低限の環境を整えましょう。

インストール

npm install riot parcel-bundler @riotjs/parcel-plugin-riot

コード

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Riot</title>
</head>
<body>
  <div id="app-root"></div>
  <script src="index.js"></script>
</body>
</html>

index.js

import { component } from 'riot'
import App from './App.riot'
component(App)(document.getElementById('app-root'))

App.riot

<App>
  <h1>{ state.title }</h1>
  <script>
    export default {
      state: {
        title: 'HELLO!'
      }
    }
  </script>
</App>

実行

npx parcel index.html

あとはhttp://localhost:1234 にアクセスします。簡単ですね!

ここからIEに対応させましょう

ポリフィルを導入

バンドルファイルをあまり肥大化させたくないのでcdnで取り入れます。以下を追加しましょう

index.html

  <script src="https://unpkg.com/core-js-bundle@3.4.7/minified.js"></script>
  <script src="https://unpkg.com/@webcomponents/template@1.4.0/template.js"></script>

これだけです！

最後に

@riotjs/routeもie11に対応させたかったのだが、parcelではnode_modulesの中のes6コードがトランスパイルされなかったため断念。
webpackでは問題なくできたので、regenerator-runtimeを取り入れれば動きます。