LoginSignup
4
5

More than 5 years have passed since last update.

他人のElectronアプリをexe化し直す

Last updated at Posted at 2017-01-21

他人が作って公開しているElectronアプリが便利だったけど、Chromiumのバージョンが古かったので、(中華フォントいや...)最新のElectronバージョンでパッケージし直すためにやったこと。
(nativifierにすべてお任せ状態からも卒業したかったので)
環境はWindows。

0. node.jsのインストール

Windowsではnodistを使うとよい。(別稿に譲る)

1. git clone

2. package.jsonを書き換える。

package.json(変更前)
...
  "devDependencies": {
    "electron-prebuilt": "^0.35.1"
  }
...

ってあったので、ここで最新バージョンを確認して書き換える。

package.json(変更後)
...
  "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に上げるときは誰でも実行、ビルドできないといけないと思っていたんだけど、自分本位でガンガンあげていいんだな…。(裏を返すと、向こうもそうしてくるから気をつけろということ)

4
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
5