他人が作って公開しているElectronアプリが便利だったけど、Chromiumのバージョンが古かったので、(中華フォントいや...)最新のElectronバージョンでパッケージし直すためにやったこと。
(nativifierにすべてお任せ状態からも卒業したかったので)
環境はWindows。
0. node.jsのインストール
Windowsではnodistを使うとよい。(別稿に譲る)
1. git clone
2. package.jsonを書き換える。
...
"devDependencies": {
"electron-prebuilt": "^0.35.1"
}
...
ってあったので、ここで最新バージョンを確認して書き換える。
...
"devDependencies": {
"electron": "^1.4.15"
}
...
package.jsonにversion指定がないときは、electron-packageのオプションで指定できる。
jsの書き換え
今回electron-prebuiltをelectronに変更したが、その際の注意点として、appやbrowser-windowがimport(or require)できなくなっているので、そういうことをしているjsを書き換える。
import app from 'app';
import BrowserWindow from 'browser-window';
import electron from 'electron';
import electron from 'electron';
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
(参考)ElectronのクイックスタートでCannot find module 'app'にハマった件
4. フォルダに移動してnpm install
これによりnode_modulesフォルダが作られて、Electron本体など必要なライブラリがダウンロードされる。
途中index.js
と表示されたまま動かなくなるのはElectronのダウンロードに時間が掛かるため。
5. 動作確認のためnpm start
フォルダ内にlaunch.shとかあって、案の定動かなかったので、electron .
で実行。
6. electron-packagerのインストール
npm install electron-packager -g
7. パッケージ作成
electron-packager . --platform=win32 --arch=x64 --asar --icon=[フォルダの中にあったpngファイル]```
32bitなら--arch=ia86
で。
しばらく待つと、「アプリ名-win32-x64」というフォルダができあがっていて、中にExeが入っている。
--electronVersion
は、このアプリではpackage.jsonから判定されるので不要。
またアプリ名も、package.jsonのproductNameのままでよければ不要。
ビルドし直す時は--overwrite
をつけるとよい。出力フォルダを手で消してもいいが、アプリがエラーで落ちた場合に、残ったプロセスがファイルをロックしたりして面倒。このオプションをつけるとその辺をいい感じにやってくれる。
おまけ
GitHubで公開されているアプリは、他の人が同じようにビルドできるかどうかなんてちゃんと確認していないことがままあるようで。
今回のアプリも、babel-coreとかがdevDependenciesに入っていてアプリの実行時にcannot find moduleエラーになったりしていたので、dependenciesに移動してやって、ちゃんと動くアプリを作成できた。
趣味アプリでもGitHubに上げるときは誰でも実行、ビルドできないといけないと思っていたんだけど、自分本位でガンガンあげていいんだな…。(裏を返すと、向こうもそうしてくるから気をつけろということ)