ElectronInAction/chapter02/show.gif">
本章主要内容
生成package.json,通过开发用Electron配置其工作
在你的项目中预先构建Electron版本
配置你的package.json去启动主进程
从主进程生成渲染进程
利用Electron沙盒，限制宽松的优点构建通常在浏览器无法构建的功能
使用Electron的内置模块来回避一些常见的问题
在第一章中，我们从高的层次上，讨论了什么是Electron。说到底这本书叫做《Electron实战》，对吧?在本章中，我们通过从头开始设置和构建一个简单的应用程序来管理书签列表，从而学习Electron的基本知识。该应用程序将利用只有在现代的浏览器中才能使用的特性。
在上一章的高层次讨论中，我提到了Electron是一个类似于Node的运行时。这仍然是正确的，但是我想回顾下这一点。Electron不是一个框架——它不提供任何框架，也没有关于如何构造应用程序或命名文件的严格规则，这些选择都留给了我们这些开发者。好的一面是，它也不强制执行任何约定，而且在入手之前，我们不需要多少概念上的样板信息去学习。
构建书签列表应用程序
让我们从构建一个简单而又有些幼稚的Electron应用程序开始，来加强我们已经介绍过的所有内容的理解。我们的应用程序接受url。当用户提供URL时，我们获取URL引用的页面的标题，并将其保存在应用程序的localStorage中。最后，显示应用程序中的所有链接。您可以在GitHub上找到本章的完整源代码(https://github.com/electron-in-action/bookmarker)。
在此过程中，我们将指出构建Electron应用程序的一些优点，例如，可以绕过对服务器的需求，使用最前沿的web api，这些web api并不广泛支持所有浏览器，因为这些APIs是在现代版本的Chromium中实现。图2.1是我们在本章构建的应用程序的效果图。
Action/chapter02/figure21.png">
图2.1 我们在本章中构建的应用程序效果图
当用户希望将网站URL保存并添加到输入字段下面的列表中时，应用程序向网站发送一个请求来获取标记。成功接收到标记后，应用程序获取网站的标题，并将标题和URL添加到网站列表中，该列表存储在浏览器的localStorage中。当应用程序启动时，它从localStorage读取并恢复列表。我们添加了一个带有命令的按钮来清除localStorage，以防出现错误。因为这个简单的应用程序旨在帮助您熟悉Electron，所以我们不会执行高级操作，比如从列表中删除单个网站。
搭建Electron应用
应用程序结构的定义取决于您的团队或个人处理应用程序的方式。许多开发人员采用的方法略有不同。观察学习一些更成熟的电子应用程序，我们可以辨别出共同的模式，并在本书中决定如何处理我们的应用程序。
出于我们的目的，为了让本书文件结构达成一致。做出一下规定，我们有一个应用程序目录，其中存储了所有的应用程序代码。我们还有一个package.json将存储依赖项列表、关于应用程序的元数据和脚本，并声明Electron应该在何处查找主进程。在安装了依赖项之后，最终会得到一个由Electron为我们创建的node_modules目录，但是我们不会在初始设置中包含它
就文件而言，让我们从应用程序中的两个文件开始:main.js和renderer.js。它们是带有标识的文件名，因此我们可以跟踪这两种类型的进程。我们在本书中构建的所有应用程序的开始大致遵循图2.2中所示的目录结构。(如果你在运行macOS，你可以通过安装brew install tree使用tree命令。)
图2.2 我们第一个Electron应用的文件结构树