VSCode用のElectron+TypeScript+Vue+Webpackの開発・デバッグ環境のたたき台を作った

概要

Electronでデスクトップアプリを作ろうと思い立ち、
TypeScriptにVueを合わせた開発環境を構築しました。

バンドラーにはWebpack使ってます。

ついでにVSCodeでならMain/Rendererプロセスのデバッグもlaunch.jsonに設定済みなので、興味あればご一読あれ。

• 参考サイト

https://qiita.com/ghqian/items/a6325bc30676c7fa7b5d
https://qiita.com/mamo/items/084039c3e6d703b7b45f

環境

• OS

Windows10
※MacOSでもlaunch.jsonを少し変える程度ですelectron.cmd → electron

• エディター

項目	Ver
VSCode	1.19.2
Debugger for Chrome	4.2.0

• ミドルウェア

項目	Ver
Node.js	9.8.0
Electron	1.8.2
TypeScript	2.7.2
Vue.js	2.5.14
Webpack	4.0.1

使い方

# git clone
$ git clone https://github.com/rog-works/electron-with-ts
$ cd electron-with-ts

# `--no-optional`はMacOSでしかインストール出来ないパッケージがあるので、念のためつけてます
$ npm install --no-optional

# JSのバンドル
$ npm run bundle

# アプリケーション起動
$ npm run start

デバッグ

• VSCodeの拡張機能であるDebugger for Chromeをインストール

• デバッグの種類を選んでF5!

最後に

最初は話題のParcel使おうと思って色々悪戦苦闘したものの、ソースマップが上手く設定できない・ホットロードが外せない(オプションでHMRを有効にして欲しかった)と言う結果に至って諦めました。

Vueは簡単に使いたかったので、変な使い方しているかもですが、Vue初心者なのでご容赦を

他、記事に記載していない細かなことはGitHubのリポジトリを参照してください

以上