webpack, Electron環境で__dirnameをfalseにするとDevtronが動かなくなり__dirnameをtrueにするとプロダクションでパスが参照できない問題を解決しました
Devtronという開発ツールがあります. ElectronのIPC通信を見てくれるやつです. 優れものです.
しかし困ったことがあって,
Devtronはwebpackの設定を__dirname: trueにしないとディレクトリを正しく読み込みません.
かと言って__dirname: trueにすれば良いのかというとそうではなく.
__dirname: trueにすると,
__dirnameがソースコードの場所を指してしまいます.
するとプロダクション環境でindex.htmlを参照するのが難しくなってしまいます.
今日はLinux版のelectron-builderが生成したAppImageが動かない問題を解決しようとしていて.
__dirname: falseにすると解決するのですが.
Devtronが動かない問題に頭を悩ませていました.
改めて調べなおしてみると, 9日前にREADME.mdにworkaroundが追加されていました. update readme with note about webpack · electron/devtron@f6ec1c7
webpackを使っているとき, コンパイル時に
__dirnameがランタイムによって解決される問題がdocsに従って発生する可能性があります.
- これを回避するには
- webpackが
__dirnameを書き換えないようにするnode: {__dirname: false}devtron/manifest.jsonのコピー先がコンパイルされたメインプロセスのjsファイルと同じフォルダにあることを確認するdevtron/out/browser-globals.jsのコピー先がコンパイルされたメインプロセスの.jsファイルを基準にしたout/browser-globals.jsであることを確認する
これを行う必要があるようです.
要は参照問題を解決すれば良いのですね, 任せてください.
我々のメインプロセスjsはapp/main.jsに作成されるため.
out -> ../node_modules/devtron/out/static -> ../node_modules/devtron/static/vendor -> ../node_modules/devtron/vendor/manifest.json -> ../node_modules/devtron/manifest.json
とシンボリックリンクを作成することで__dirname: falseにしていてもDevtronが起動するようになりました.
これらのシンボリックリンクを.gitignoreを編集してトラッキングするようにして完了です.
しかしやり終わった後にWindows環境ではシンボリックリンクが動かないことに気がつきました…
manifest.jsonを編集するのが正道なのでしょうか? しかし編集方法が今ひとつわかりません.
また, シンボリックリンクをトラッキングしてしまうとESLintがコンパイルされたDevtronのコードを読みに言って長時間固まってしまいます. ESLintにはシンボリックリンクを辿らない設定も無いようですね. やはりシンボリックリンクはやめておきましょう.
リンクがダメならどうするか, コピーである.
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
省略
output: {
path: path.resolve(__dirname, 'app'),
filename: 'main.js',
},
plugins:
process.env.NODE_ENV === 'development'
? [
new CopyWebpackPlugin([
{
from: `${__dirname}/node_modules/devtron/manifest.json`,
to: '.',
},
...['out', 'static', 'vendor'].map(pathName => ({
from: `${__dirname}/node_modules/devtron/${pathName}/`,
to: `${pathName}/`,
})),
]),
]
: [],
};
このようにコピーをすることでどの環境でも解決. ファイルはトラッキングせずにビルド時にコピーしてもらう.
これでおそらく解決しました. やっとアップデートできたwebpack4めっちゃ早くてびっくりです.
hatena-bookmark