はじめに
「ElectronとVue.jsをかじってみる」ですっぴんElectronアプリを作りました。ロゴやバージョン情報を表示するだけですが、初めてのElectronアプリということで、ちょっと楽しい。
クロスプラットフォームなアプリを作ることができるのが、Electronの特徴の1つです。今回はすっぴんアプリをWindowsで動くようにパッケージ化してみます。
毎度毎度荒っぽいですが、今回も荒々しく行きます。
とりあえずゴールすれば良し!ゴールしてから振り返り!
パッケージングで使うツール
electron-vueプロジェクトを新しく作ったとき、パッケージングツールとしてelectron-builder
を選んだのでそれを使います。
electron-packager
というツールもあります。
yarn add electron-packager
で導入可能ですが、今回は使いません。
早速パッケージ化
Mac(64bit)用にパッケージ化します。
yarn electron-builder --mac --x64
いざ実行すると、なんとエラー。
Error: Application entry file "dist/electron/main.js" in the "/~/sample_project.app/Contents/Resources/app.asar" is corrupted
Error: ENOENT: no such file or directory, open '/~/sample_project.app/Contents/Resources/app.asar'
一発ではうまくいかないだろうと思ってました。想定の範囲内なので驚きませぬ。
でも不思議なことに、build
ディレクトリにmac
ディレクトリが作成されており、中にapp
ファイルができていたのです!!
アプリケーションを実行してみる
パッケージングのコマンドが
Error Command failed with exit code 1
で終了したので無駄でしょうが、せっかくapp
ファイルができていたので、実行してみましょう。
動いた!!
なぜ……
改めてエラーを見てみる
何かファイルが無いと言われている
no such file or directory, open '/***.app/Contents/Resources/app.asar'
app
ファイル内にapp.asar
があるか、まず見てみましょう。
→ありました。
何かが破損していると言われている
Application entry file "dist/electron/main.js" in the "/***.app/Contents/Resources/app.asar" is corrupted
app.asar
の中にあるmain.js
が破損しているとのこと。
dist/electron/main.js
を見てみると、難読化されたソースでした。(読む気は即座に失せました)
結論
クロスプラットフォームなアプリは(パッと見た感じでは)簡単にできます!
アプリはあります!
結果的にはアプリはできています。ただし、パッケージ化のコマンドが正しく完了していないとのことなので、何らかのエラーを抱えている可能性があります。
セキュリティ関係のことも含めて、もっと調べる必要がありそうです。
何か釈然としない……
エラーの原因(推定)
asar
形式での圧縮の際にエラーが起こっている- 難読化された
dist/electron/main.js
の中で何か文法エラーのようなものが起こっている
もしかすると、これら以外の原因があるかもしれないです。見つかれば追記するかもしれません。
まさかelectronのバージョンが低すぎるからとか?
参考
Windows用にパッケージ化
LinuxでWindows向けのパッケージングをするのは少々癖があるようです。
yarn electron-builder --win --x64
なおwine
が必要と言われるので、未インストールの場合は、
yarn add wine
を実行してください。
注意:できたexeは未検証
手元にWin機が無いため出来上がったexeファイルの実行確認はしていません。
注意:wineをいれたのにwineが無いと言われてしまう
どこかで見たパターン。
yarnしたはずなのにwineが無いと言われる。でも、exeファイルはできている不思議。
Linux用にパッケージ化
yarn electron-builder
オプションなしでLinux(64bit)用にパッケージングしてくれます。