WebPackを使用したSPAをElectron化する

学習のために、SPA 作ったMarkdown エディタを Mac のアプリとして使いたくなったので、Electron 化した。
その時にしたことをメモ。

Webpack の設定

Electron を SPA の Javascript に バンドルしてほしくないので、externals の設定を追加。

externals: {
  electron: 'require("electron")',
  fs: 'require("fs")'
},

SPA 側で electron かどうかを判定

process.type を参照して renderer の場合のみに、Electronを読み込み。

if (window.process && window.process.type == "renderer") {
  const ipcRenderer = require("electron").ipcRenderer;
  ...
}

あとは Electron 側で index.html てきなものを loadURL　するだけで、SPAのソースを流用できた。