Electron を使用すると HTML & CSS & JS でクロスプラットフォームなデスクトップアプリを開発できます。
建前上は Linux と Windows と macOS とで同じ仕様のソフトウェアを動かすことが可能ということになっていますが、実際には node_modules 以下のモジュールのコンパイルエラーやファイルパス、Node.js のバージョンなどの影響を受けるため、ほかの OS 上で開発されたプロジェクトをそのままクローンして実行しようとするとうまくいかないことが多々あります。
とくに Windows 10 上での実行では、ほかの OS では見たこともないような得体の知れないエラーが頻出します。これは Node.js が部分的に C++ で構成されていたり、一部のモジュールのインストール時に Python のような JS 以外の言語で書かれたスクリプトが実行されたりするためです。
Windows はこうした開発者ツールを備えていませんので、必要な場合はユーザが自身でインストールして設定を行わなければなりません。
私も Windows の使い方が分からないのですが、エラーメッセージをだいぶ見慣れて耐性がついてきたので備忘録代わりに記述しておきます。
動作環境 Windows 10 (ver 1909)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$ uname -a MINGW64_NT-10.0-18363 DESKTOP-BFSGMU1 3.1.7-340.x86_64 2020-10-23 13:08 UTC x86_64 Msys $ node -v v12.18.4 $ yarn -v 1.22.5 $ grep -e sqlite3 -e \"electron\" package.json "sqlite3": "^5.0.2", "@types/sqlite3": "^3.1.7", "electron": "^10.4.1", |
例えば、表題にもなっている SQLite です。
パッケージマネージャ yarn でインストールされた sqlite3 モジュールを Windows 10 上で実行された Electron から利用するとエラーメッセージが表示されます。
|
1 2 3 4 5 6 7 |
$ electron ./dist/main.js App threw an error during load C:\Users\galileo\workspace\a-mangement-system\dist\main.js:5949 const writeFileAsync = async (filePath, data, options = consts_1.DEFAULT_WRITE_OPTIONS) => { ^ SyntaxError: Unexpected token ( |
これを解消するためには node-gyp を使用して sqlite3 モジュールを実行環境、つまりここでは Windows 10 に適したバイナリファイルに生成しなおしてやらなければなりません。
そこでまずは公式に従って 以下から Windows Python をインストールします。
https://docs.python.org/3/using/windows.html#the-microsoft-store-package
それから Visual C++ Build Environment: Visual Studio Build Tools (using “Visual C++ build tools” workload) or Visual Studio 2017 Community (using the “Desktop development with C++” workload) と指定されているので Visual C++ build tools も一緒にインストールします。
https://visualstudio.microsoft.com/thank-you-downloading-visual-studio/?sku=BuildTools
さいごに Windows PowerShell を起動して以下のように Node.js の windows-build-tools モジュールをインストールします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
PS C:\Users\galileo> Start-process powershell.exe -Verb runas PS C:\WINDOWS\system32> npm config set msvs_version 2017 PS C:\WINDOWS\system32> npm install --global --production windows-build-tools Status from the installers: ---------- Visual Studio Build Tools ---------- Successfully installed Visual Studio Build Tools. ------------------- Python -------------------- Still waiting for installer log file... Now configuring the Visual Studio Build Tools and Python... All done! |
ちなみに私は PowerShell の使い方が全く分からないのですが、管理者権限のないユーザがモジュールをインストールしようとすると
Please restart this script from an administrative PowerShell!
The build tools cannot be installed without administrative rights.
という警告文が表示されてエラーになるため、ここは管理者権限で PowerShell を実行してインストールを行っています。
ほかの作業は GitBash (v2.30.1) が連れてきた MINGW64 上で実行しているのですが、ここだけは PowerShell を使わないとうまくインストールできませんでした。
インストールが完了しましたら sqlite3 モジュールを削除して Electron 用にビルドしなおしてやれば、問題なく使用できるようになります。
ビルドのやり方は sqlite3 のドキュメントに従います。
|
1 2 3 4 5 6 7 8 9 |
$ npm remove sqlite3 $ PYTHON='C:\Users\\galileo\.windows-build-tools\\python27\\python.exe' $ export PYTHON $ npm config set PYTHON $ npm config set msvs_version 2019 $ npm install sqlite3 --runtime=electron --target=10.4.1 --dist-url=https://atom.io/download/electron --build-from-source > sqlite3@5.0.2 install C:\Users\galileo\workspace\a-mangement-system\node_modules\sqlite3 > node-pre-gyp install --fallback-to-build |
Python のパスを通しているのはエラーを予防するためのもので、もしかしたら必要ないかもしれません。
引数 dist-url の設定値は割と最近に変更されたらしく https://electronjs.org/headers と https://atom.io/download/electron のドキュメントが混在しています。前者は 404 Not found を返すのでここでは後者を採用します。
同様に Electron アプリの実行やビルド段階でエラーが発生する場合、モジュールとファイルパスを確認すると問題が解決する可能性があります。
