parcelでelectron向けビルドするためのオプションについて

手っ取り早いまとめ

parcel watch .\src\index.html --public-url ./ --no-hmr --target=electron

以下詳細

parcelはコマンドなしで実行すると開発用のビルドとhttpのサーブを行ってくれます

parcel hoge.html

本番向けにはbuildサブコマンドを使います．

parcel build hoge.html

ほかにもwatchサブコマンドでビルドだけ行わせることができます．

parcel watch hoge.html

しかしながら，parcelは開発ビルド(デフォルト,watch)をすると（用途は不明ですが） websocketで開発用のサーバと通信を行うコードを出力します．したがって以下のようにelectronと組み合わせて使用すると electronアプリからのページアクセス時にエラーを発行します．

parcel watch hoge.html &
electron dist/hoge.html
// WebSocket': The URL 'ws://:61948/' is invalid エラー発生

この問題をparcelのissueで調べると以下のissueを見つけました． Failed to construct 'WebSocket': The URL 'ws://:61948/' is invalid · Issue #856 · parcel-bundler/parcel · GitHub

したがってparcel watchの際には--no-hmrをつけましょう

parcel watch hoge.html --no-hmr

おわり

おまけ

上記のwebsockの問題以外にもelctronと組み合わせた際にエラーが発生するケースがあります．

絶対パス<->相対パス

electronはデフォルトの設定ではパスを絶対パスでアクセスしようとするとうまく動作しない問題があります． 例： /js/hoge.js 等 （参考: https://qiita.com/tuttieee/items/4123784f1eb68a1d3925）この問題を回避するには参考ページにあるようにfileプロトコルアクセス時のパス解決をインターセプトするか，もしくは初めから相対パスを使う方法があります． parcelはデフォルトではビルド後のファイルのリンクが/から始まる絶対パス指定になってしまいます．この絶対パス指定をやめるために--public-urlを使用しましょう．

parcel watch hoge.index --public-url .

こうするとパスの起点が設定されなくなり相対パスURLが生成されるようになります．

electronのimport

electronを使用する場合，rendererプロセス側のコードから

import  electron from "electron"

というようにelectronのAPIにアクセスするために‘electron‘モジュールをインポートするのですが，このimport文がparcelに解釈されてしまう関係でエラーが発生します. これを回避するために--target=electronをつけましょう．