Vue CLI Plugin Electron Builder + TypeScriptでpreloadを設定するとき

環境

• Vue: 2.6.11
• Electron: 13.0.0
• Vue CLI Plugin Electron Builder: 2.1.1

状況

Electronでの重要な要素の1つに、IPC通信というものがあります。詳細は、下記記事などが参考になります。

上記記事でも述べられていますが、現在、ElectronでIPC通信を行うときは、contextBridgeを使うことが推奨されています。そして、そのcontextBridgeを使うときは、preloadスクリプトというものを用意します。

以下、メモ書きで恐縮ですが、Vue CLI Plugin Electron Builderを使ってTypeScriptで開発するときに、preloadスクリプトの設定方法を記します。

設定方法

1. preload.tsを作成する

background.tsと同じディレクトリに作成します。

preload.ts

import { contextBridge, ipcRenderer, IpcRendererEvent } from "electron";

// 以下、contextBridgeを使ったコード

2. メインプロセスにpreloadを追加

background.ts内でBrowserWindowをインスタンス化している部分に、preloadオプションを追記します。preload.tsではなく、preload.jsである点に注意。

background.ts

+ import path from 'path'

  const win = new BrowserWindow({
    width: 800,
    height: 600,
    useContentSize: true,
    webPreferences: {
+     preload: path.join(__dirname, 'preload.js'),
    },
  })

3. プラグインにオプションを追加

vue.config.js内に、Electron Builderプラグイン用のオプションを追記します。設定可能なオプションは多数ありますが、その中の1つであるpreloadオプションを追記します。

vue.config.js

  module.exports = {
+   pluginOptions: {
+     electronBuilder: {
+       preload: 'src/preload.ts',
+     },
+   },
  }

preloadオプションについては、Electron Builderのドキュメントにも記述されています。