First Electron App

很早就想要用 Electron 來開發 App 了，因為 Web 其實用起來有時候卡卡的
尤其 Electron 出現之後，開發 Web 等同於開發 App，真是令人感到興奮～

開始

  • 建立一個目錄

  • 用 npm init 建立 package.json

  • 安裝 electron-prebuilt

    1
    npm install --save-dev electron-prebuilt

程式內容

簡單的 Hello World!

  • 先建立 app 目錄

  • 產生 app/index.html 檔案，內容很簡單！就是 Hello! 

    1
    <h2>Hello</h2>

  • 建立 main.js 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    'use strict';

    var app = require('app');
    var BrowserWindow = require('browser-window');

    var mainWindow = null;

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

        mainWindow.loadURL('file://' + __dirname + '/app/index.html');
    });

執行

因為剛剛安裝了 electron-prebuilt，所以可以直接用下面的指令就可以執行了！ 

1
node_modules/.bin/electron .

這樣就可以了～

打包

參考 electron-packager

  • 先安裝 electron-packager

  • 參考說明文件，用下面的指令來打包自己的 App。（注意那個版本只的是 Electron 版本，不是你自己 App 的版本）

    1
    2
    3
    $ electron-packager ./ App1 --platform=darwin --arch=x64 --out ~/Desktop/App1 --version 0.36.2 --overwrite
    Packaging app for platform darwin x64 using electron v0.36.2
    Wrote new app to /Users/RickyChiang/Desktop/App1/App1-darwin-x64

    目前 Electron Release 的版本是 0.36.2，可以到 https://github.com/atom/electron/releases 去看

  • electron-packager 命令列的說明可以參考 usage.txt

  • 到桌面看就會有檔案產生了，點兩下就可以執行了

後語

如果要方便執行的話，可以編輯一下 package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
    "name": "app1",
    "version": "1.0.0",
    "description": "",
    "main": "./main.js",
    "scripts": {
        "start": "electron .",
        "package": "electron-packager ./ App1 --platform=darwin --arch=x64 --out ~/Desktop/App1 --version 0.36.2 --overwrite"
    },
    "devDependencies": {
        "electron-packager": "^5.2.0",
        "electron-prebuilt": "^0.36.2"
    }
}

這樣就可以用 npm start 執行了～
編譯的話，就用 npm run package 就可以了