RollupによるJSの自動ビルド

[sounisi5011]

もうたくさんだ！モジュールインポートを避けながらJSを書くなんて！！

というわけで、いいかげんそろそろRollupによるビルド環境を導入したい。
https://github.com/rollup/rollup-starter-code-splitting のような感じのコード分割を、HTMLの<script>要素を読み取って全自動で行わせる。

1. PostHTMLで全てのHTMLの<script>要素を読み取る
2. RollupでES module用とSystemJS用のビルドを生成する
3. 各ファイルの<script>要素を置換する
   • <script type=module>で読み込むES module用<script>要素を追加
   • <script nomodule>でSystemJSを動的ロードするコードとSystemJS用ファイル群を読み込むインラインコードを追加
     • SystemJSで他のファイルを一切読み込んでいない場合は、SystemJSの記述を即時関数に変更。また、HTMLが要求する全てのJSがSystemJSを必要としていない場合は、SystemJSの動的ロードも行わない。
     • 対象のJSがasync属性もdefer属性も無い「同期実行」を求める場合は、SystemJSも<script nomodule>で読み込む
     • 必要であればPromiseのPolyfillもロードする。可能であれば、必要性はBrowserslistで判定する。

[sounisi5011]

対象のJSがasync属性もdefer属性も無い「同期実行」を求める場合は、SystemJSも<script nomodule>で読み込む

そもそもの話をして良いか？SystemJSって、同期ロードに対応してるんだろうか？

[sounisi5011]

• <script type=module>で読み込むES module用<script>要素を追加
• <script nomodule>でSystemJSを動的ロードするコードとSystemJS用ファイル群を読み込むインラインコードを追加

<script type=module>に対応しているが、dynamic importに対応していないブラウザが存在する。<script type=module>と<script nomodule>で分けるのは止めたほうが良い。