Electron：#1 環境作成

Electronの開発環境を作ってみる。
※ https://html5experts.jp/yosuke_furukawa/20841/

■環境
ホストOS：Windows 10 1909 (18363.959)
仮想化　：VirtualBox 6.1.8
ゲストOS：Windows 10 1909 (18363.959)

Visual Studio Code：1.47.2
nodist -v：0.9.1
node -v：v12.18.0
npm -v：6.9.0

■環境作成
任意フォルダ(e:\edu\electron\01)を作成し、そこからVSCodeを起動

[CTRL]+@ でターミナル(cmd)を起動し以下コマンドを入力
"npm init -y"

続いてElectron
"npm i electron"

main.jsファイルを作成

const {app, BrowserWindow} = require('electron');

let win;
 
function createWindow () {
  win = new BrowserWindow({width: 800, height: 600});
 
  win.loadURL(`file://${__dirname}/index.html`);
 
  win.on('closed', () => {
    win = null;
  });
}
 
app.on('ready', createWindow);
 
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
 
app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

index.htmlファイルを作成

  
    
    
  
  
    
Hello Electron!
Node version: ,
    Chrome version: ,
    Electron version: .
  

package.jsonファイル修正
"main"と"scripts"内の"test"を削除し"start"を追加

{
  "name": "01",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^9.1.0"
  }
}

ターミナルより "npm start" を実行

→ プログラムが実行される

---

学習メモ, Electron