Svelte+Electron開発環境構築

コード（できたもの）

yoshida-san / svelt-and-electron-dev-env

ベースプロジェクト

yoshida-san / sapper-ext

Electron対応

パッケージ追加

~$ npm i -D electron
~$ npm i electron-serve

エントリポイント追加

package.json

Electronのエントリポイントはmain.jsが慣例だった気がする。

"main": "main.js"

main.js

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('__sapper__/export/index.html')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

動かす

~$ npx electron .

npm scriptのstartを変えておく。

"start": "electron ."

テスト関連

単体とコンポーネント

~$ npm run test:unit
~$ npm run test:components

当然ながら問題なく動く。

E2E

CypressのElectron対応はalpha releaseを最後に音沙汰ないっぽいのでSpectronを使いましょう。Spectronの使い方はまた後日。

とりあえず不要なものを削除しておきます。

~$ npm r cypress
~$ rm -rf ./test/e2e
~$ rm cypress.json

ビルド（パッケージング）

Build用Package追加と設定

~$ npm i -D electron-builder

package.json

"build": {
  "appId": "com.electron.sapper-ext",
  "productName": "SapperExt",
  "directories": {
    "output": "dist"
  },
  "files": [
    "__sapper__/export/**/*",
    "main.js"
  ]
}

distディレクトリにビルド結果が出力されます。

Windows向けビルドコマンド

~$ npx electron-builder --win --x64 --dir

exe, DLL等が展開された状態で出力されます。

~$ npx electron-builder --win --x64

Windows用インストーラが出力されます。

Mac向け

~$ npx electron-builder --mac --x64 --dir

Mac用アプリケーション(.app)が出力されます。

~$ npx electron-builder --mac --x64

Mac用インストーラが出力されます。

おわり

アイコン設定とか細かい設定は公式ドキュメントを参照ください。
以前触った記憶でやったので今はこうするのが主流とかあれば教えてもらえると嬉しいです。