Electron Forgeのcreate-appでプロジェクトを作り、フロントエンドJSを適用する

新規にElectronを作る場合、チュートリアルに従うと、素のプロジェクトにnpm installすることになります。

mkdir my-electron-app && cd my-electron-app
npm init
npm install electron --save-dev

www.electronjs.org

Electron Forge

チュートリアルを進めていくと、Electron Forgeという、アプリのパッケージングや頒布を支援するツールが登場します。
そして、Electron Forgeを採用する場合、これには専用のテンプレートが存在します。
JSビルドも含めたエコシステムのセットアップを、ショートカットすることが可能です。`

www.electronforge.io

npm init electron-app

プロジェクト作成の前段として、webpack or viteを事前に決めておきます。
また、typescriptの可否を決定します。

npm init electron-app@latest my-app -- --template=webpack
npm init electron-app@latest my-app -- --template=webpack-typescript
npm init electron-app@latest my-app -- --template=vite
npm init electron-app@latest my-app -- --template=vite-typescript

Forge's initialization scripts can add additional template code with the --template=[template-name] flag.
npm init electron-app@latest my-app -- --template=webpack
There are currently four first-party templates:

webpack

webpack-typescript

vite

vite-typescript

React or Vue 3 の追加

npm init electron-appで作成したプロジェクトに、React or Vue を追加します。
これは、Framework Integrationの項目を参考に進めます。
本記事の執筆時点では、AngularはFramework Integrationに専用記事がないようです。

www.electronforge.io

あとがき

npm init electron-app@latest my-app -- --template=webpack-typescript で生成される、webpackのconfigファイル周りはだいたい理解できました。
vite-typescript版は、まだ理解できておりません。
viteは過去に使った経験がないので、習熟度をあげたいところです。