↑【Electron連載（目次）】Electronでアプリ完成までのメモ
さてさて、今回はVSCodeでElectronアプリのデバッグ環境を準備するまでやるで。
タスクランナーの設定
VSCodeのタスクランナー機能を使うで。
1.まずは、VSCode上でF1キーを押してコマンドパレットを表示や。
2."task"と入力してリストに出てくる「タスクランナーの構成」を選択してや。
3.次のリストの「TypeScript - tsconfig.json」を選択や。
4.デフォルトで下のtask.jsonが作成されるで。
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "silent",
"problemMatcher": "$tsc"
}
tsconfig.json作成
まずはTypeScriptをコンパイルする設定や。
プロジェクトのルートフォルダにtsconfig.jsonを作成してや。
んで、下のソースを記述っと。
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
tsconfigに関してはこっちが詳しいで
http://js.studio-kingdom.com/typescript/project_configuration/tsconfig_json
とりあえず、コンパイラオプションとコンパイル対象外フォルダの設定な。
本来なら、出力フォルダは別にするほうがいいかもしれへんけど、
そこまで大規模じゃないんで、コンパイル対象外フォルダはnode_moduleだけな。
もうちょっと規模が大きくなってきたらsrcとdistで分けて運用するかも。
launch.jsonの設定
んじゃ、VSCodeから起動する設定やで。
1.VSCodeの左の丸の中の虫マークをクリック（Ctrl+Shift+D）してデバッグサイドバー表示してな。
2.上の「構成がありません」と出てるリストボックスから「構成の追加」を選択してや。
3.launch.jsonファイルが作成され、画面中央にリストボックスが表示されるので、「Node.js:Electron Main」と書いてあるリストを選択や。
4.launch.jsonに最初からある、type:nodeの部分を削除やで。
5.起動jsファイルの指定がmain.jsになっているのでindex.jsに変更。
6.一応、「runtimeExecutable」で指定されているファイル（コマンド）が存在するか確認しておいてや。
{
// 使用できる Node.js デバッグ属性を学ぶために、インテリセンスを使用してください。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron Main",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"program": "${workspaceRoot}/index.js", //main.js -> index.jsに修正
"protocol": "legacy"
}
//ここの下にある部分は削除
]
}
index.ts準備
とりあえず、空ウィンドウを出すだけのコードを記述や。
1.VSCodeで左のバーのファイルエクスプローラーからプロジェクトルートに新規ファイル作成な。
2.ファイル名をindex.tsにしてや。
3.下のソースをコピペしてな。
/// <reference path="node_modules/electron/electron.d.ts" />
const electron = require('electron');
const BrowserWindow: typeof Electron.BrowserWindow = electron.BrowserWindow;
const app: Electron.App = electron.app;
class MyApplication {
mainWindow: Electron.BrowserWindow = null;
constructor(public app: Electron.App){
this.app.on('window-all-closed', this.onWindowAllClosed);
this.app.on('ready', this.onReady);
}
onWindowAllClosed = () => {
if(process.platform != 'darwin'){
this.app.quit();
}
}
onReady = () => {
this.mainWindow = new BrowserWindow({
width: 800,
height: 400,
minWidth: 500,
minHeight: 200,
acceptFirstMouse: true,
titleBarStyle: 'hidden'
});
this.mainWindow.on('closed', () => {
this.mainWindow = null;
});
}
}
const myapp = new MyApplication(app);
ビルド＆実行
index.tsにエラーがないことを確認してや。
1.Ctrl+Shift+Bを押してTypeScriptのビルドするで。
2.index.jsとindex.js.mapが作成されていることを確認してや。
3.index.tsの適当なところの行番号の左をクリックして、ブレークポイントを設定や。
4.F5を押して実行や。
5.ブレークポイントで止まるか確認してや。