翻译 | 《JavaScript Everywhere》第18章 带Electron的桌面应用程序

翻译 | 《JavaScript Everywhere》第18章 带Electron的桌面应用程序

写在最前面

大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。

为了提高大家的阅读体验，对语句的结构和内容略有调整。如果发现本文中有存在瑕疵的地方，或者你有任何意见或者建议，可以在评论区留言，或者加我的微信：code\_maomao，欢迎相互沟通交流学习。

(σﾟ∀ﾟ)σ…:*☆哎哟不错哦

第18章 带Electron的桌面应用程序

我第一次接触个人计算机是在一个充满Apple II机器的学校实验室中进行的。

每周一次，我和我的同学被老师带进教室，给了一些软盘，并给出了有关如何加载应用程序（通常是Oregon Trail）的粗略说明。在这些课程上，除了记得自己发呆之外，我对其他事情记不清了。自1980年代中期以来，个人计算机已经走了很长一段路，但是我们仍然需要依靠桌面应用程序来执行许多任务。

通常，我可能会访问电子邮件客户端、文本编辑器、聊天客户端、电子表格软件、音乐流服务以及其他多个桌面应用程序。一般，这些应用程序具有与Web应用程序等效的功能，但是桌面应用程序的便利性和集成性可以为用户带来很多好处。但是，多年来，创建这些应用程序的能力一直非常缺乏。值得庆幸的是，今天，我们能够使用网络技术来构建功能全面的桌面应用程序，而且学习曲线很小。

我们正在构建什么

在接下来的几章中，我们将为Notedly的社交笔记应用程序构建一个桌面客户端。我们的目标是使用JavaScript和Web技术来开发桌面应用程序，用户可以下载并安装在计算机上。目前，该应用程序将是一个简单的实现，它将我们的Web应用程序包装在桌面应用程序shell中。以这种方式开发我们的应用程序将使我们能够快速将桌面应用程序发送给感兴趣的用户，同时为我们提供了以后为桌面用户引入自定义应用程序的灵活性。

我们将如何构建它

要构建我们的应用程序，我们将使用Electron，它是一个开放源代码的框架，用于使用Web技术构建跨平台的桌面应用程序。它可以利用Node.js和Chrome的基础浏览器引擎Chromium来工作。

这意味着作为开发人员，我们可以使用浏览器、Node.js和特定于操作系统的功能，而这些功能通常在Web环境中不可用。Electron最初是由GitHub为Atom文本编辑器开发的，但此后一直用作大小应用程序的平台，包括Slack，VS Code，Discord和WordPress Desktop。

入门

在开始开发之前，我们需要将项目启动程序文件复制到我们的电脑上。

项目的源代码包含了开发应用程序所需的所有脚本和对第三方库的引用。

要将代码克隆到我们的本地计算机，请打开终端，切换到保存项目的目录，然后git clone项目存储库。如果你已经研究过API和Web章节，则可能已经创建了一个 notedly目录来保持项目代码的有条理：

$ cd Projects
$ # type the `mkdir notedly` command if you don't yet have a notedly directory
$ cd notedly
$ git clone git@github.com:javascripteverywhere/desktop.git
$ cd desktop
$ npm install

安装第三方依赖项

通过制作本书的入门代码的副本，并在目录中运行npm install，你无需为任何第三方依赖项再次运行npm install。

该代码的结构如下：

• /src

  这是你随书一起进行开发的目录。

• /solutions

  该目录包含每章的解决方案。
  如果你卡住了，这些可以供你参考。

• /final

  该目录包含最终的工作项目。

创建项目目录并安装依赖项之后，我们就可以开始开发了。

我们的第一个电子应用程序

将我们的代码存储库克隆到我们的电脑后，让我们开发我们的第一个Electron应用程序。如果你在src目录中查找，则会看到其中有一些文件。index.html文件包含了