やっていた作業

今書いているElectronアプリはmainプロセス側はBabelもTypeScriptもFlowも使っていない生JSで書かれていました.

生JSというのも問題ですが, rendererプロセス側ではBabelを使っていたので, mainプロセスとrendererプロセスでコードを共有できず, 同じコードがコピペして増えるという悪夢が発生していました.

私はこれを解決すべく, mainプロセス側もBabelとwebpackを通すようにコードを変更していました.

webpackの設定ファイルを2つに分けて, renderer側ではこれまでと引き続きwebpack-dev-serverを使い, main側ではwebpack --watchでdistにコンパイルしたコードを吐き出すようにして, 起動自体はするようになりました.

問題

webpackでビルドすると, グローバル変数__dirnameが/になってしまう問題に遭遇しました.

これのせいで__dirnameに依存する動作が全て動かなくなりました.

例えばDevtronのインストールや, ログファイルの書き出しのためのディレクトリ作成などです.

Devtronのコードを直接書き換えて__dirnameを使っているところをハードコーディングして期待する値に書き換えたら動いたので__dirnameの値が/になってしまうのが原因なのは確実です.

__dirname returns '/' when js file is built with webpack · Issue #1599 · webpack/webpack によるとwebpack.config.jsに以下のようにしてnode.__dirnameを値が何でも良いので設定すれば良いらしいです.

そのようにしました.

  node: {
    __dirname: false,
  }

解決しませんでした.

__dirname not in relation to original location · Issue #4303 · webpack/webpack はcloseされないまま現在進行形で扱われているままです.

解決策

わからない. issueには｢2015年から治っていない｣とか書かれています. 誰か助けてください.

それとも__dirnameはES Moduleで消滅するから放置されているのでしょうか.

webpack 3にしたら解決しました

webpack@3.11.0とwebpack-dev-server@2.11.2を使って, node: {__dirname: true}と記述してみたら, 正常に動作しました.

webpack 4ではGitHubのissueに書かれているworkaroundは動かなくなったみたいですね.

ひとまずwebpack 3で動作するようなったのは良いのですが, いつかはwebpack 4にアップデートしないといけないので, これをどうするかは悩みどころですね.