Node.js
TypeScript
vue.js
Electron
VSCode

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

概要

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

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

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

  • 参考サイト

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

環境

  • OS

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

  • エディター
項目 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をインストール

無題.png

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

無題2.png

最後に

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

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

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

以上