あしあと

自分自身のログ（足跡）となります。ソフトウェアエンジニアです。ブログはテック系の内容が少し多めです。

Electronで開発時だけDevToolsを出すように切り分けた

Electron Javascript

背景

Electronでアプリを作っています。正確には作り始めました。

開発時はデバッグもしたいので、DevToolsを出しています。
そのため、そのままアプリをビルドすると、ビルド後のアプリでもDevToolsが出ます。

毎度DevToolsの箇所を消したり、コメントアウトするのが面倒なので、切り分けれるようにしました。

※Electron初心者なので、デフォルトで他に良い機能があるかもしれません。

方針

方針としては、

  • 特定のファイルが存在すると開発モードになる
  • ビルド時にファイルが含まれないようにする

です。原始的な方法です。

やりかた

私は一番初めに呼ばれるmain.jsに以下の修正をしました。

const path = require('path')
const fs = require('fs')

function isDev() {
  let f = path.join(__dirname, '/status.dev')
  if (fs.existsSync(f)) {
    return true
  }
  return false
}

と、status.devが同じフォルダに存在するかどうかで開発モードかどうかを判断するようにしました。
これを使って、

  // Debug tool
  if (isDev()) {
    w.webContents.openDevTools();
  }

という風な切り分けを作りました。
また、このファイルが本番に入らないように、.gitignore にstatus.devを追加し、ビルド時は、

npx electron-packager . xxxx --platform=darwin \
                             --arch=x64 \
                             --overwrite \
                             --icon=Icon.icns \
                             --ignore=status.dev # <-- これを追加!

とすることで、対象に含まれないようにしました。

所感

他に良い方法があれば良いのですが、、、ご存知の方は教えて欲しいです。