概要
環境構築からサンプルアプリをVisual Studio Codeでデバッグするまでの手順
事前準備
- Node.jsがインストールされていること
手順
ディレクトリを作る
mkdir sample
cd sample
package.jsonを作る
npm init
electronをインストール
npm install electron --save-dev
基本となるファイルを作る
mkdir src
cd src
touch index.html
touch main.js
touch package.json
[ファイル構成]
- /node_modules
- /src
- index.html
- main.js
- package.json
- package.json
index.html
<html>
<head>
<meta charset="UTF-8">
<title>タイトル</title>
</head>
<body>
<h1>Sample</h1>
</body>
</html>
main.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
var config = require('../package.json');
const path = require('path');
const url = require('url');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow(
{
title: config.name,
width: 800,
height: 600
});
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, '/index.html'),
protocol: 'file:',
slashes: true
}));
mainWindow.openDevTools();
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
package.json
{
"main": "main.js"
}
コマンドでアプリ実行
Windows
./node_modules/.bin/electron src
Mac
npx electron src
Visual Studio Codeのビルド設定（Windows/Mac共通）
1 左メニューの虫マークを押下してビルド画面を開く
2 「構成の追加...」を押下
3 コマンドパレットのところに「Node.js」と入力
launch.jsonの雛型ができる
4 launch.jsonを編集
"configurations": [
{
"name": "Debug",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"program": "${workspaceRoot}/src/main.js",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"runtimeArgs": [
"--enable-logging"
],
"args": [
"."
],
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
"console":"integratedTerminal",
}
]
5 デバッグ
「Debug」になっているのを確認して再生ボタンを押下
