CSB の Vanilla (Parcel) を使った場合でもエラーが起きないようにしたい

[dynamis]

CHIRIMEN ではサンプル集を基本 CSB で提供する習慣が付いているが、CSB 初心者 (ではなくとも) よくハマる問題として "Static" テンプレートではなく "Vanilla" テンプレートを使ってコードを書き始め、Parcel が暗黙で変換する影響を受けてしまうという罠がある。

具体的には Parcel では JS ファイルをモジュール化するため、main.js でグローバル変数やグローバル関数のつもりで宣言して HTML 側の onclick 属性値などにて参照・呼び出し仕様とすると Reference Error が表示される。

対策案:

• HTML 側で onclick などのハンドラは使わず addEventListener でイベントリスナ登録をするコードに
  • コード分離という意味では正しい書き方だと思うがなかなか止められないかもですね
• main.js 側で window.connect = function connect() { ... } のようにグローバル変数に明示代入するコードとする
  • parcel 対策だと分かっていなければ意味不明で初心者向きと言えなさそう
• Vanilla 使うなとコメントや FAQ ドキュメントでケアする
  • 普通はフォークするので Static のままで困ることはないのだが、ついつい Vanilla 使ってスクラッチからコードを書く人がいる問題...

取りあえず最後の「FAQ に書く」という対処は行っておいたが、長期的には addEventListener コードにしていく方が良いのではないかと思ったりもする (ので issue として書き残した)

コピペして動かない FAQ に説明を追加:
https://github.com/chirimen-oh/chirimen.org/blob/master/raspi/debug.md#example-%E3%82%92%E3%82%B3%E3%83%94%E3%83%9A%E3%81%97%E3%81%9F%E3%81%AE%E3%81%AB%E5%8B%95%E3%81%8B%E3%81%AA%E3%81%84

参考:
https://stackoverflow.com/questions/64429055/parcel-and-global-variables-in-js
https://blog.hitsujin.jp/entry/2020/03/28/020000