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

本文到此结束。