Zenn
Open27

Electron全然わからんのでゼロから勉強すべ

Electron
React
TypeScript
かっこかっこ

ドキュメント読む
https://www.electronjs.org/docs/latest/

かっこかっこ

By embedding Chromium and Node.js into its binary

バイナリにNode.jsも組み込まれてるのね
まあnodeのライブラリも使えるのでそれはそうか…

かっこかっこ

セキュリティ的な理由で、デフォルトではmain processはNode.jsの機能にフルアクセスできるけどrenderer processはWebページとして動いていてNode.jsの機能にはアクセスできない

かっこかっこ

main processとrenderer processの橋渡しをするための特別なスクリプトをElectronではpreloadと呼んでいる

かっこかっこ

preload scriptはHTML DOM(renderer processで扱うもの)とNode.jsおよびElectron API(main processで扱うもの)のサブセットの両方にアクセスできる。

かっこかっこ

preload scriptではcontextBridge APIを利用することでglobalなオブジェクトを定義できる

かっこかっこ

Electronのコアにはパッケージ化や配布のための機能は含まれていない
Electron Forgeを利用する

かっこかっこ

electron-vite ( @quick-start/electron )で作成したプロジェクトの依存をゴニョゴニョしてパッケージのバージョンを最新にして npm install したら postinstall が永久に終わらない問題に直面して解決しようといろいろ調べてたら2時間くらい溶けた
結局 electron-builder のバージョンを1つ落としたら無事一瞬で完了した

 {
   "name": "foo",
   "version": "0.1.0",
   "description": "foo",
   "main": "./out/main/index.js",
   "author": "carimatics",
   "homepage": "https://example.com/foo",
   "type": "module",
   "scripts": {
     "format": "biome format --write ./src",
     "lint": "biome lint --write ./src",
     "check": "biome check --write ./src",
     "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
     "typecheck:web": "tsc --noEmit -p tsconfig.web.json --composite false",
     "typecheck": "npm run typecheck:node && npm run typecheck:web",
     "start": "electron-vite preview",
     "dev": "electron-vite dev",
     "build": "npm run typecheck && electron-vite build",
     "postinstall": "electron-builder install-app-deps",
     "build:unpack": "npm run build && electron-builder --dir",
     "build:win": "npm run build && electron-builder --win",
     "build:mac": "electron-vite build && electron-builder --mac",
     "build:linux": "electron-vite build && electron-builder --linux"
   },
   "dependencies": {
     "@electron-toolkit/preload": "3.0.1",
     "@electron-toolkit/utils": "3.0.0",
     "electron-updater": "6.3.9"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.3",
     "@electron-toolkit/tsconfig": "1.0.1",
     "@types/node": "20.16.10",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.0",
     "@vitejs/plugin-react": "4.3.2",
     "electron": "32.1.2",
-    "electron-builder": "25.1.8",
+    "electron-builder": "25.1.7",
     "electron-vite": "2.3.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "typescript": "5.6.2",
     "vite": "5.4.8",
     "vitest": "2.1.2"
   }
 }