개요

Electron에서 데스크톱 앱을 만들려고 생각합니다.TypeScript 에 Vue 를 맞춘 개발 환경을 구축했습니다.

번들러에는 Webpack 사용하고 있습니다.

이어서 VSCode 그렇다면 Main/Renderer 프로세스의 디버그도 launch.json 에 설정이 끝났으므로, 흥미 있으면 읽어 주세요.

참고 사이트

htps : // 코 m / gh 쿠안 / ms / 6325bc30676c7 7b5d
htps : // 이 m/마모/있어 ms/084039c3에6d703b7b45f

환경

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의 리포지토리를 참조해 주세요

이상