個人的に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を取り入れれば動きます。