Electron覚えてみる？

qiita.com
何が良いって、Windows対応の説明なんです。

【1】まずは環境準備

C:\node>mkdir ele
C:\node>cd ele
C:\node\ele>node --version
v12.16.3
C:\node\ele>npm --version
6.14.4

【2】package.jsonを作る
こうやってフォルダ単位でpackage.jsonを作っていく感じなのね。

 npm init -y

【3】エレクトロンをインストールする

npm i -D electron

【4】エレクトロンを立ち上げる

npx electron

おぉ、立ち上がった！

【5】Hello World
前出Qiitaの通り、index.htmlとindex.jsとpackage.jsonの3ファイルをsrcフォルダ内に作って、動かしてみます！

C:\node\ele>npx electron src

おぉ、ハローワールド出た！

・・・以降、前出Qiitaの手順はパッケージングまでスキップします。

【6】パッケージングの準備
まずはelectron-paackagerをインストールします。

npm i -D electron-packager

【7】パッケージング
"--icon"でアイコンを設定することもできるようだ。

npx electron-packager src my_electron --platform=win32 --arch=x64 --overwrite --icon=src/icon.ico

さぁ、exeファイルを実行しよう！ ⇒ できた！

【8】package.jsonのscriptに登録
ちなみに、package.jsonのscriptに次のように書いておくと、npm run build-windowsみたいな感じでビルドを実行できるみたいです。package.jsonって、こういう書き方をするのね。

{
  :
  "scripts": {
    "start": "electron ./src",
    "build-windows": "electron-packager ./src my_electron --platform=win32 --arch=x64 --overwrite --icon=src/icon.ico"
  },
  :
}

以降、これで呼び出せますよ。良いですね。使い方が分かってきました。

C:\node\ele>npm run build-windows