主程序（Main Process）

正如之前所提，Electron有兩大程序：主程序（Main Process）和渲染程序（Renderer Process）。在這個示例程式中，主程序程式碼就在main.js檔案中。

Note
通常將主程序檔案命名為main.js，這樣表示Node從這裡啟動應用的主程序。當你的專案程式碼重構目錄結構後，必須在package.json中將主程序檔案重新指定。

main.js的基礎程式碼中有許多有用的註釋，大致如下：

const electron = require('electron')
// Module to control application life.
 

const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
 

let mainWindow
function createWindow() {
    // Create the browser window.
    mainWindow = new BrowserWindow({ width: 800, height: 600 })
    // and load the index.html of the app.
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
 

    }))
    // Open the DevTools.
    mainWindow.webContents.openDevTools()
    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null
    })
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit()
    }
})
app.on('activate', function () {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow === null) {
        createWindow()
    }
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

最開始的程式碼用來獲取應用所需模組：

const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')

electron正是Electron模組，提供了Electron的API和Node擴充套件。

app呼叫Electron的API來控制應用的生命週期，稍後的程式碼會展示其用法。

BrowserWindow控制Electron的渲染程序。我們將會用它建立一個Chromium例項來生成應用的UI。

path和url是Electron呼叫的Node API，這些是能供任何Electron程式呼叫的Node API的一部分。path用來處理檔案和目錄操作，url用來建立URL。

接下來的程式碼穿插著註釋講述如下：

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

Note
如果你啟動應用後窗口卻不出現，很可能是因為主程序沒有引用mainWindow。這種情況也會導致應用的其他視窗無法建立。

然後是建立主視窗的方法createWindow：

function createWindow() {
    // Create the browser window.
    mainWindow = new BrowserWindow({ width: 800, height: 600 })
    // and load the index.html of the app.
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))
    // Open the DevTools.
    mainWindow.webContents.openDevTools()
    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null
    })
}

createWindow方法的流程如下：
* 建立一個瀏覽器視窗（BrowserWindow），傳入一個描述視窗尺寸的物件。本例中視窗高800畫素，寬600畫素。
* 使用path和url連線index.html模組載入視窗。index.html檔案是渲染程序的開始點。
* mainWindow.webContents.openDevTools()開啟Chromium的開發者工具（Developer Tools）。開發者工具對於除錯渲染程序十分有用。
* 監聽視窗例項的closed事件。此處註釋描述如何管理多個視窗。這個方法僅僅是將你的視窗例項引用置為null，在未來將會加入更多程式碼。

程式碼最後的部分是app的監聽器（listener），用來控制視窗何時建立、應用何時退出。

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
        app.quit()
    }
})
app.on('activate', function () {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (mainWindow === null) {
        createWindow()
    }
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

app例項監聽三個事件：ready、window-all-closed和activate。
當收到ready事件後，呼叫上面講過的createWindow方法。

如註釋所述，由於在Mac OS X平臺下使用者可以關閉程式所有的視窗而不退出程式，而在Windows和Linux卻並非如此，window-all-closed用來關閉非Max OS X平臺的程式。

值得注意的是，我們用了Node API提供的模組process。在本例中process.platform在Max OS X平臺會返回darwin，而在Windows平臺會返回win32。即時在64位Windows平臺下process.platform也會返回win32，用process.arch（表示架構：Architecture）會返回x64。

由於使用者能在Max OS X平臺下啟動一個應用而不開啟視窗，activate事件被觸發時會建立新視窗。這裡沒有判斷當前系統型別，因為建立視窗的條件為：activate事件被觸發，並且主視窗為空（mainWindow === null），這些條件只會在Max OS X平臺滿足。

在main.js檔案的最底端註釋提示我們，可以在此為主程序新增其他程式碼，或者引用外部檔案提高程式碼整潔度。