原文：https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md
譯者：Lin
Electron提供包含了豐富的原生（操作系統(tǒng)）接口的運(yùn)行時(shí)，使你能夠使用純粹的JavaScript創(chuàng)建桌面應(yīng)用程序蛤育。你可以把它看作是一個(gè)變形的重點(diǎn)是在桌面應(yīng)用程序而不是網(wǎng)頁服務(wù)上的Node.js運(yùn)行時(shí)厦画。
這并不意味著Electron是一個(gè)將JavaScript綁定到圖形用戶界面（GUI）上的庫逞频。相反奔脐，Electron使用網(wǎng)頁作為它的GUI，所以你也可以把它看成是一個(gè)使用JavaScript控制的極小的Chromium瀏覽器。
Main Process主進(jìn)程
Electron中往弓，運(yùn)行package.json’的main腳本的過程叫做the main process(主進(jìn)程)旦装。運(yùn)行主進(jìn)程的腳本會(huì)創(chuàng)建一個(gè)網(wǎng)頁作為一個(gè)GUI來顯示页衙。
Renderer Process渲染進(jìn)程
自從Electron使用Chromium來顯示網(wǎng)頁，Chromium的多進(jìn)程架構(gòu)也被使用在Electron中阴绢。Electron中的每一個(gè)網(wǎng)頁都運(yùn)行在它自己的進(jìn)程中店乐，這個(gè)就叫做the renderer process(渲染進(jìn)程)。
一般的瀏覽器中呻袭，網(wǎng)頁通常在一個(gè)沙盒環(huán)境中運(yùn)行眨八，并且不允許使用原生資源。然而左电，Electron的使用者有能力在網(wǎng)頁中使用Node.js的借口來與底層的操作系統(tǒng)進(jìn)行交互廉侧。
主線程和渲染線程的不同
主進(jìn)程通過創(chuàng)建BrowserWindow實(shí)例來創(chuàng)建網(wǎng)頁。每一個(gè)BrowserWindow實(shí)例運(yùn)行網(wǎng)頁在它自己的渲染進(jìn)程中篓足。當(dāng)一個(gè)BrowserWindow實(shí)例被銷毀的時(shí)候段誊，對(duì)應(yīng)的渲染進(jìn)程也會(huì)被結(jié)束。
主進(jìn)程管理所有的網(wǎng)頁和他們對(duì)應(yīng)的渲染進(jìn)程栈拖。每一個(gè)渲染進(jìn)程都是被隔離的连舍，并且只會(huì)關(guān)心在它自己里面運(yùn)行的網(wǎng)頁。
網(wǎng)頁中辱魁，不允許調(diào)用本地GUI相關(guān)的接口烟瞧，因?yàn)樵诰W(wǎng)頁中管理本地GUI資源是非常危險(xiǎn)的并且也非常容易泄漏資源。如果你想要在網(wǎng)頁中執(zhí)行GUI操作染簇，網(wǎng)頁的渲染進(jìn)程必須和主進(jìn)程請(qǐng)求通訊参滴，然后使用主進(jìn)程之行這些操作。
Electron中我們有幾種在主進(jìn)程和渲染進(jìn)程之間通訊的方式锻弓。例如用來發(fā)送消息的ipcRenderer和ipcMain模塊砾赔，以及RPC通訊方式的remote模塊。這里還有一個(gè)FAQ條目來分享如何在頁面之間傳輸數(shù)據(jù)青灼。
編寫你第一個(gè)Electron應(yīng)用程序
一般來說暴心，一個(gè)Electron應(yīng)用程序是按照這樣的方式來構(gòu)造的：
your-app/
├── package.json
├── main.js
└── index.html
package.json的類型和Node模塊的完全相同，指定腳本中main字段內(nèi)是你的應(yīng)用程序的啟動(dòng)腳本杂拨，它將會(huì)在主線程運(yùn)行专普。一個(gè)你的package.json文件的例子看起來像這樣：
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
注意：如果package.json文件中不存在main字段，Electron 將會(huì)默認(rèn)加載一個(gè)index.js弹沽。
main.js文件應(yīng)該創(chuàng)建一個(gè)窗口并且處理系統(tǒng)事件檀夹，一個(gè)典型的例子是：
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
// 保持一個(gè)窗口對(duì)象的全局引用筋粗，如果你不這樣做，當(dāng)JavaScript對(duì)象被回收之后窗口將會(huì)被自動(dòng)關(guān)閉
let win
function createWindow () {
// 創(chuàng)建一個(gè)瀏覽器窗口
win = new BrowserWindow({width: 800, height: 600})
// 加載應(yīng)用的index.html
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// 打開DevTools.
win.webContents.openDevTools()
// 監(jiān)聽窗口關(guān)閉
win.on('closed', () => {
// 移除窗口對(duì)象的引用炸渡，
// 如果你的應(yīng)用支持多窗口你通常會(huì)將所有窗口存儲(chǔ)在數(shù)組中娜亿，
// 這個(gè)時(shí)候你應(yīng)該刪除相應(yīng)的元素。
win = null
})
}
// 當(dāng)Electron完成初始化并且準(zhǔn)備創(chuàng)建一個(gè)瀏覽器窗口的時(shí)候會(huì)調(diào)用這個(gè)方法蚌堵。
// 一些接口只能在這個(gè)事件之后使用买决。
app.on('ready', createWindow)
// 當(dāng)所有窗口都被關(guān)閉的時(shí)候退出。
app.on('window-all-closed', () => {
// macOS系統(tǒng)下對(duì)于應(yīng)用這是很常見的吼畏，它們的菜單欄保持活躍直到他們使用Cmd + Q鍵確定退出
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// macOS系統(tǒng)下這是很常見的督赤，當(dāng)應(yīng)用在dock上的圖標(biāo)被點(diǎn)擊的時(shí)候（并且當(dāng)時(shí)沒有其他窗口是打開的），就會(huì)在應(yīng)用中重新創(chuàng)建一個(gè)窗口宫仗。
if (win === null) {
createWindow()
}
})
// 在這個(gè)文件中你可以包含其他你的應(yīng)用程序在主線程中運(yùn)行的代碼部分够挂。
// 你也可以在把其他的代碼放在其他的文件中，然后在這里require它們藕夫。
最后是你想展示的網(wǎng)頁的index.html頁面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
運(yùn)行你的應(yīng)用程序
一旦你已經(jīng)創(chuàng)建了最開始main.js孽糖、index.html和package.json文件，你將可以嘗試在本地運(yùn)行測(cè)試你的應(yīng)用程序毅贮，來確保它是可以正常的工作办悟。
electron
electron是一個(gè)包含了Electron的預(yù)編譯版本的npm模塊。
如果你安裝了全局的npm滩褥，那么你只需要在你源代碼的根目錄下運(yùn)行下面的命令就可以了：
electron .
如果你在本地安裝了它病蛉，那么運(yùn)行：
macOS / Linux
$ ./node_modules/.bin/electron .
Windows
$ .\node_modules\.bin\electron .
手動(dòng)下載Electron二進(jìn)制文件
如果你手動(dòng)下載Electron的二進(jìn)制文件，你也可以使用已經(jīng)包含的二進(jìn)制文件直接之行你的應(yīng)用程序：
Windows
$ .\electron\electron.exe your-app\
Linux
$ ./electron/electron your-app/
macOS
$ ./Electron.app/Contents/MacOS/Electron your-app/
Electron.app是Electron發(fā)布的包的一部分瑰煎，你可以在這里下載它铺然。
作為一個(gè)distribution運(yùn)行
當(dāng)你完成你的應(yīng)用程序的編寫之后，你可以遵循Application Distribution指南創(chuàng)建一個(gè)distribution酒甸，然后執(zhí)行打包應(yīng)用程序魄健。
試試這個(gè)例子
在這個(gè)指導(dǎo)中通過使用electron/electron-quick-start倉庫來克隆并運(yùn)行。
注意：運(yùn)行這個(gè)命令需要你的系統(tǒng)中有Git和Node.js（并且包含了npm）
# 克隆倉庫
$ git clone https://github.com/electron/electron-quick-start
# 進(jìn)入倉庫
$ cd electron-quick-start
# 安裝依賴
$ npm install
# 運(yùn)行應(yīng)用程序
$ npm start
更多的應(yīng)用程序例子插勤，查看最好的Electron社區(qū)創(chuàng)建的list of boilerplates沽瘦。
