[译] 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 开发的将来。

本文到此结束。