【Node.js】Electronで開発ビルドと本番ビルドを分けたい時の手法

結論

ビルド時に.envファイルに環境変数を書き込む

"scripts": {
    "build:dev": "tsc && touch .env && echo NODE_ENV=development > .env && electron-builder build --mac --x64 --dir",
    "build:prod": "tsc && touch .env && echo NODE_ENV=production > .env && electron-builder build --mac --x64 --dir"
}

解説

Electronで開発をしていると「開発者ツールの表示、非表示を開発環境と本番環境で切り替えたい」などといった、開発環境と本番環境で処理を分けたい時があると思います。 ローカルで試す時は実行時にNODE_ENVを設定してあげれば

// 開発モードかどうか
if(process.env.NODE_ENV === 'development')
{
    // 開発モードなら開発者ツールを開く
    mainWindow.webContents.openDevTools();
}

のように開発環境か本番環境かを区別できるのですが、問題はビルドしてパッケージ化された後にどうするかという部分です。 調べていてよく出てくるのがapp.isPackagedについての情報ですが、これはパッケージ化前後の区別をつけるものなので、ビルド後の開発環境と本番環境を区別したい場合にはあまり有効ではありません。そこで考えたのが、冒頭に書いたようにビルド時に.envファイルに環境変数を書き込む方法です。

"scripts": {
    "build:dev": "tsc && touch .env && echo NODE_ENV=development > .env && electron-builder build --mac --x64 --dir",
    "build:prod": "tsc && touch .env && echo NODE_ENV=production > .env && electron-builder build --mac --x64 --dir"
}

これにより、開発ビルドと本番ビルドで異なるNODE_ENVが使われるため、以下のように dotenv を使うことで区別をつけることができます。

// 環境変数を読み込む
require('dotenv').config({ path: __dirname + 'main.jsからenvファイルまでの相対パス' });

// 開発モードかどうか
if(process.env.NODE_ENV === 'development')
{
    // 開発モードなら開発者ツールを開く
    mainWindow.webContents.openDevTools();
}

もしかしたら electron-builder の build config 等を適切に設定するなどして開発ビルドと本番ビルドを分ける方法があるのかも知れませんが、自分が調べた限りではそういった情報が見当たらなかったので、暫定的に本記事の方法を採用しています。