WSL2でElectron開発する方法(VcXsrvなし)
WSL2(Windows11)でElectron開発したくて、１日分の夜を潰した結果、かなりアホなオチだったので、書いて置く。
前提
なお前提として、絶対に外部ツール(VcXsrvなど)入れたくない、WSL2内で完結させるというのが、目標でした。
多くの記事では、「WSLでElectronをやるためには、VcXsrvを入れろ」と書いてあります。が、
どうしても、WSL2内で完結させたいです。
なぜ、WSL2で完結させたいかと言うと、Windows11のWSLには、WSLgと言って、2021年春あたりから、GUI機能が標準搭載されていて、本来外部ツールなんて入れる必要がないはずと思っていて完結させたかったです。
それにWSLgだけなら、シンプルな開発環境になるしね。不要なソフト・プロセスを入れたくない主義です。
ということで、成功した方法を書いていく。
成功した方法(多分、正攻法)
関係資料
とりあえず、この方法を導き出すのに使った資料を置いておく。全部ではないが、核心部分は日本語で書かれているので、絶対に見て欲しい。また、WSL2は普通にインストールしたものでいいので、WSLインストールについて書かない。
1.npmのインストール
上記のMicrosoftのページに書いてある通りなのだが、WSL2のためのインストール方法がある。
コマンドだけ載せると、こんな感じ。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
command -v nvm
ここで、何も書かれないか「コマンドが見つからない」と言われる場合は、一旦ターミナルを閉じる。
nvm ls
nvm install --lts
なお、nvm install --ltsだと、LTS リリースインストール。nvm install nodeだと、Letest版になる。
2.プロジェクト作成
いつも通りに、好きなところにinitすればいい。
npm init
3.Electronのインストール
上記で、WSLでは、通常npmインストールではいけない理由が書かれている。WSLの仕様上、作成されるEXEは、Linuxのために作成されたものではなく、Windowsのために作成されたものではないといけないということが書いてあった。なので、
npm install --save-dev electron --platform=win32
を行う。
4.プログラミングする
とりあえず、今回は、動けばいいので、HelloWorld文を出す。
ということで、上記のページからソースを貰ってくる。
5.ビルドする
上記のページの説明に戻ってしまうが、自分が作ったプログラムに対しても、Windowsのために作成されたものとして、ビルドすることになる。なので、
npm run start -- --platform=win32
という感じで、できる。
Discussion