ぺんちゃん日記

食と歴史と IT と。 Web の旅人ぺんじろうが好奇心赴くままに彷徨います 。

PC 環境移行の山場 eltest のコンパイルを行う

pc

PC 環境移行の作業もいよいよ大詰め。

ぶっ倒れて買い直した PC の環境移行が次第に落ち着いてきました。
夜のラジオ番組が安定して聞ける ようになったので大至急で取り組むべき課題がなくなりました。
Twitter もブックマークもできるし、ブログも問題なく更新できるようになりました。
PC が故障していたあいだに起きた出来事もブログに書けました。
そして最後に残った大物は eltest のコンパイルです。
Node . JS の開発環境を構築して JavaScript のソースコードを Windows アプリケーションにコンパイルしなければなりません。

チラシの裏にでも書くべき個人的な作業記録となりますのでご了承を。


コンパイルが通るまでの作業ログが全く取れていないし、以前のコマンドヒストリーも失われているので、自分の記憶だけを頼りに進めなきゃならんのだ。
特に半年ぶりのコンパイルとなると、バージョンアップもガンガンで絶対動かなくなってます。

ということで今回は作業記録を残します。
自分用なのでそんなに細かくは書きません。
未来の私は頑張って思い出しながら読んでくださいね。

インストールから動作テストまで。

Node . JS を動かす。

開発環境は Visual Studio Code です。
git が使えて github のリポジトリで作業できる状態にします。

Windows 版の github Desktop をインストールして、 github リポジトリからクローンしてきます。

Node . JS をインストール。
スタートメニューから Node . JS のコマンドプロンプトを開いて NPM が動くか確認します。

プロジェクトのフォルダを Visual Studio Code から「フォルダを開く」で開きます。
メニューの表示から出力でコマンドのプロンプトを表示させます。
私はヘタレなので powershell じゃなくて cmd です。

コンパイル準備。

コマンドからプロジェクトを更新します。
まずは必要なパッケージをインストールします。

npm install

多分古いパッケージを使っていて危険だから何とかしろと怒られると思います。

そこで指示通り、アップデートすべきパッケージを表示させます。

npm audit

ざっと眺めた後、警告レベルの高いパッケージをまとめてアップデートします。

npm audit fix

セキュリティ警告が消えないよ。

それでもセキュリティ警告が消えない場合は ncu を使ってみます。
npm-check-updatesというお助けツールです。
まずはグローバル領域インストールします。

npm install -g npm-check-updates

ncu コマンドでバージョンの変化を確認してから

ncu

オプションを付け加えてバージョンを更新します。

ncu -u

Webpack でコンパイル。

ウェブパックで JavaScript のコードをバベルして 、一つのファイルにまとめます。
と言っても、メインプロセスとレンダラプロセスの二つのファイルにまとめます。
コンパイル方法はそれぞれコンフィグファイルに求められていますのでオプションで指定します。

webpack -o main.js --config webpack.main.config.js 
webpack -o build\app.js --config webpack.renderer.config.js

動作確認します。

npm start

動かなかった場合は開発ツールを開きます。
Chrome のオプションで開けるやつです。
メインプロセスのウィンドウ初期化処理で表示しないように設定されていたので、そこをコメントアウトしてコンパイルし直します。

起動すると開発ツールが開いた不格好なアプリケーションが起動するので、開発ツールのエラーコンソールで HTML と JavaScript がエラーを起こしていないか確認します。
大体は動かない時は javascript の require が失敗しています。

アプリケーションのパッケージ化。

出来上がった JavaScript コードを実行ファイルにパッケージします。
プロジェクトの一つ上のディレクトリから、パッケージ化のコマンドを実行します。

electron-packager eltest eltest --platform=win32 --arch=x64

Twitter のアクセストークンとか変換辞書をアプリケーションの設定ファイルに保存しています。
electron-storeで保存してるやつですね。
これはアプリケーション名が同じなら統一されています。
ホームディレクトリの AppDataの奥の方を掘り返せばファイルコピーで以前の環境から復元できるような気がしますが、今回の場合は保存ディレクトリのファイル構成が違っていたので転用できませんでした。