続create-react-app + electrion-forge @Windows

はじめに

昨日の続きで、asarを制御する方法を調べてみた。
asarを指定すると、作成したファイルがapp.asarのファイルにまとめられる。
でも、中に入っているファイルがわからないから、ちょっと困る。
そこで、確認するためには、以下のいずれかの方法がある。

1. app.asarの中身を覗く。
2. asarの指定を動的に変更できるようにする。

1. app.asarの中身を覗く方法

node_modules/.binを覗いてみると、asarがCLIも提供しているみたいなので、それを調べてみると、以下のような感じでできる。

npx asar list <ファイル名>

今回の場合は、こんな感じで一覧が出てくる。

$ npx asar list out/electron-react-win32-x64/resources/app.asar

このため、以下のようにすると、package後に、ファイルが参照できる。

package.json

  "run": {
    "forge:package": "cross-env FORGE_ASAR=false electron-forge package",
    "postforge:package": "asar list out/electron-react-win32-x64/resources/app.asar",
    ...

2. asarの指定を動的に変更できるようにする。

基本的に、electron-forgeの設定はpackage.jsonのconfig.forgeで指定する。

package.json(before)

...
  "config": {
    "forge": {
      "packagerConfig": {
        ...
      },
      "makers": [
        ...
      ]
    }
  }
}

しかし、electron-forgeもご多分に漏れず、こんな感じで設定をjsファイルに外だしできる。

package.json(after)

...
  "config": {
    "forge": "./forge.config.js"
  }
}

forge.config.js

module.exports = {
  packagerConfig: {
    ...
  },
  makers: [
    ...
  ]
}

設定がjsファイルになってしまえば、あとは、process.env.XXXを参照するようにすれば、自由に変更することができる。
package.jsonのrun-scriptsにcross-envあたりで定義しつつ、electron-forgeを実行してあげればよい。
例えば、以下のようにする。

package.json

  "run": {
    "forge:package": "cross-env FORGE_ASAR=false electron-forge package",
    "forge:make": "electron-forge make",
    ...

forge.config.js

module.exports = {
  packagerConfig: {
    asar: process.env.FORGE_ASAR !== 'false'
  },

このようにすると、
npm run forge:packageでパッケージを作ると、out/xxx/resources/app配下にファイルが格納され、
npm run forge:makeでインストーラを作るときは、app.asarが作成されることになる。