Angular2 + electron 環境構築

readme.md

考え方

electron特有の機能としては

• main.js で画面初期化処理
• package.jsonの記述がちょっと増える
• ビルド用の記述(gulpまたはnpm script) くらいなのであまり考えず、普通に angularとして構成を作ればよい。

必要なもの

• ng-cli
• electron-cli

実行コマンド

ng init

Electron用に更新・追加

package.jsonを更新

{
  "version": "0.0.0",
  "main": "electron-start.js",
  //something...
}

electron-start.jsを追加

const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow

app.on('ready', function (){
  let mainWindow = new BrowserWindow({width:800, height:600})

  // set URL; 
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'dist/index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // run DevTool; same as chrome dev tool.
  mainWindow.webContents.openDevTools()

  // memory release
  mainWindow.on('closed', function(){
    mainWindow = null
  })
})

electron立ち上げ

ng build
electron .

typescriptの問題だからなのか、この方式だとlivereloadとかできないので開発効率遅くなるかも。
でもelectronべったりの機能ってあんまりないからなんとかなる・・・？