[譯] Electron 入門

翻譯自：https://scotch.io/@amit_merchant/getting-started-with-electron

什麼是 Electron？

Electron 官方網站這樣介紹：「Electron 是一個框架，用於使用諸如 JavaScript、HTML 以及 CSS 這類 Web 開發技術，建立桌面應用程序。它負責處理棘手的部分，讓你只用聚焦應用程序的核心功能。」

聽起來很棒，對吧？你也許開始好奇「棘手的部分」指什麼？Electron 能夠輕鬆實現應用的自動升級，本地菜單和 API，App Crash 報告，應用調試；這在市場上不少相似的解決方案都找不到，例如 nw.js。你能夠閉着眼睛放心選擇 Github 所支持的項目。

開始構建 App

我學習新技術的方法是，找一個現實世界中存在的項目，而後從新用所學的技術來實現它。基於此，我決定構建一個簡單的Markdown Editor App，它所具有的基本功能：

• 在編寫 Markdown 的同時，提供 Markdown 的實時預覽
• 顯示 Markdown 所對應的 HTML
• 基本的 Markdown 編輯支持
• 採用 GitHub 風格的 Markdown 語法

咱們來經過克隆一個初始化好的項目，來開始構建。

$ git clone https://github.com/electron/electron-quick-start
$ ren electron-quick-start electron-markdownify
$ cd electron-markdownify
$ npm install && npm start

咱們已經有了基本的 Electron 項目結構，安裝好了全部必須的 node 依賴，引入了 Electron 預編譯系統，這是每一個 Electron app 的核心，最後，咱們啓動了它。

項目的結構包括 main.js，一個 HTML 文件，以及 package.json。

Electron 運行時會開啓兩個進程：1. Main Process；2. Renderer Process。

簡而言之，Electron 提供了一個運行時，以使用純 JavaScript 的方式來構建桌面應用程序。它的工做，依賴在 package.json 中定義的 main 文件，以及執行它。而後，這個 main 文件（一般以 main.js 命名），建立應用程序的窗口，其中包含所呈現的 Web 頁面，以及具備響應操做系統交互的能力。

Render 進程涉及咱們在 HTML 中編寫的核心 JavaScript，以驅動應用程序的前端功能。

接下來，爲了方便用戶編寫 Markdown，我使用了 CodeMirror，一個基於 Web 的編輯器。這使得編寫 Markdown 方便和漂亮。

由於個人 app 是一個 Markdown 編輯器，我須要一個 Markdown 解析器，來轉換標準 Markdown 語法爲 HTML，以方便預覽。我選擇了一個很是知名的 Markdown 解析器，marked，它知足個人全部須要，包括 GFM 語法。

把這些組裝到一塊兒，最終我獲得了個人原型產品，你能夠在 這裏 看到。

結束語

回顧整個過程，我探索了許多新的與桌面 App 開發有關的玩意兒，好比打包和分發 App，處理不一樣的操做系統，以及其餘。

這個 App 一直是 beta 狀態，我也一直在學習 Electron。我瞭解 Electron 越多，就越喜歡它。這確定是桌面 App 開發的將來。

本文到此結束。