tech.chakapoko.com
Home / Electron

[Electron]Electronプロジェクトのセットアップ

Electronのインストール

まずはElectronをインストールします。 npm initpackage.json を作り、 npm install でElectronをインストールします。

$ npm init
$ npm install --save-dev electron

Hello, World!プロジェクト

Hello, World!を表示するだけのアプリケーションを作ります。

index.js

JavaScriptコードでは BrowserWindow のインスタンスを作り、index.html をロードします。

const electron = require('electron');

const createWindow = () => {
  const win = new electron.BrowserWindow({
    width: 1024,
    height: 768,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');
}

electron.app.on('ready', createWindow)

index.html

<html>
    <body>
        <h1>Hello, World!</h1>
    </body>
</html>

package.json

package.json ではstartスクリプトに electron コマンドを指定します。

{
  "name": "electron-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "./node_modules/.bin/electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^5.0.6"
  }
}

動作確認

次のコマンドでアプリケーションが起動します。

$ npm start