過去に、viteでelectronを使用していたときに困ったので、メモ代わりに記載しておきます。
viteではbufferをインポートできない
javascript上では、import と書いてあるのですが、requireをサポートしていないというエラーが出ています。requireがbufferの内部で使われていることによるエラーですね。
webpackではインポートできる
歴史の古いwebpackでは問題なくインポートできます。
このあたりは、さすが成熟したフレームワークって感じですね。
viteの方は書き方について厳格ということでしょうか。
性能を重視したviteがwebpackより汎用性が低いのはある程度仕方が無いことでしょうか。
拡張プラグインをインストールすることでimport エラーが解消する
vite-plugin-node-polyfillsをインストールすることで解決しました。
npm install -D vite-plugin-node-polyfills
上のプラグインをviteの設定ファイルに記述します。
上記を追加したあと無事に画面が映るようになりました。
下記の記事を参考にしました。
失敗事例：browserlifyをかける
node.js専用に実装されたjavascriptをブラウザでも動く方法としてbrowserlifyがあります。
簡単に言うと、node.js固有のライブラリや書き方をブラウザで動くように自動で置き換えてくれる仕組みですね。
こちらを試して見たのですが結論から言うと駄目でした。
どうも、webpack向けの書き方に変換するようで、viteでは禁止されている構文が含まれてしまってインポートエラーが起きます。
メモ：browserlifyの使い方
せっかく、調べたので個人用のメモとしてbrowserifyの使い方をメモしておきます。 まずは、グローバル領域にインストール
npm install -g browserify
対象のスクリプトファイルを第一引数に-oのあとに生成後のファイルパスを入力します。
browserify target.js -o result.js
