列表2.1 向package.json添加一个启动脚本
{ +"name": "bookmarker", |当我们运行npm start
"version": "1.0.0", |npm将会运行什么脚本
"description": "Our very first Electron application", |
"main": "./app/main.js", |
"scripts": { |
"start": "electron .", <------+
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Steve Kinney",
"license": "ISC",
"dependencies": {
"electron": "^2.0.4"
}
}
现在，当我们运行npm start时，npm使用我们本地安装的版本Electron去启动Electron应用程序。你会注意到似乎没有什么事情发生。在你的终端中，应参考以下程式码:
>bookmarker@1.0.0 start /Users/stevekinney/Projects/bookmarker>electron .
您还将在dock或任务栏中看到一个新应用程序(我们刚刚设置的Electron应用程序)，如图2.4所示。它被简称为“Electron”，并使用Electron的默认应用程序图标。在后面的章节中，我们将看到如何定制这些属性，但是目前默认值已经足够好了。我们所有的代码文件都是完全空白的。因此，这个应用程序还有很多操作需要去做，但是它确实存在并正确启动。我们认为这是一场暂时的胜利。在windows上关闭应用程序的所有窗口或选择退出应用程序菜单终止进程。或者，您可以在Windows命令提示符或终端中按Control-C退出应用程序。按下Command-Period将终止macOS上的进程。
图2.4 dock上的应用程序就是我们刚建立的电子应用
处理主进程现在我们有了一个Electron应用，如果我们真的能让它做点什么，那就太好了。如果你还记得第一章，我们从可以创建一个或多个渲染器进程的主进程开始。我们首先通过编写main.js代码，迈出我们应用程序的第一步。
要处理Electron，我们需要导入electron库。Electron附带了许多有用的模块，我们在本书中使用了这些模块。第一个—也可以说是最重要的——是app模块。
列表2.2 添加一个基本的主进程: ./app/main.js
const {app} = require('electron'); +
app.on('ready', () => { <---+ 在应用程序完全
console.log('Hello from Electron'); + 启后立即调用
});
app是一个处理应用程序生命周期和配置的模块。我们可以使用它退出、隐藏和显示应用程序，以及获取和设置应用程序的属性。app模块还可以运行事件-包括before-quit, window -all-closed,
browser-window-blur, 和browser-window-focus-当应用程序进入不同状态时。
在应用程序完全启动并准备就绪之前，我们无法处理它。幸运的是，app触发了一个ready事件。这意味着在做任何事之前，我们需要耐心等待并监听应用程序启动ready事件。在前面的代码中，我们在控制台打印日志，这是一件无需Electron就可以轻松完成的事情，但是这段代码强调了如何侦听ready事件。
创建渲染器进程
我们的主进程与其他Node进程非常相似。它可以访问Node的所有内置库以及由Electron提供的一组特殊模块，我们将在本书中对此进行探讨。但是，与任何其他Node进程一样，我们的主进程没有DOM(文档对象模型)，也不能呈现UI。主进程负责与操作系统交互，管理状态，并与应用程序中的所有其他流程进行协调。它不负责呈现HTML和CSS。这就是渲染器进程的工作。参与整个Electron主要功能之一是为Node进程创建一个GUI。