electron 打包_Electron 开发指南

Electron 是什么

Electron是一款利用Web技术开发跨平台桌面应用的框架，它的前身是Atom Shell。Electron将 Chromium 和 Node.js 的事件循环整合到了一起，同时提供了一些与原生系统交互的 API。

哪些应用是用Electron开发的

在Electron官方页面上罗列了上百款利用Electron开发的应用，包括了文本编辑、通讯聊天、音乐娱乐、数据库管理等等方面，其中比较知名的应用有Atom、VSCode和WordPress.com等。

部署开发环境

安装Node.js

Electron开发环境依赖于Node.js，所以需要先安装Node.js。

安装Electron

使用npm安装Electron:

cnpm install electron-prebuilt -g

如果提示权限错误，可以通过管理员权限打开cmd后重新运行上述命令。

安装完毕后执行：

electron -v

检查是否安装成功。

至此我们的开发环境就部署好了，下面就可以进行Electron的开发了。

Hello Word

Electron官方给出了一个简单的示例程序，可以通过Git工具从GitHub上的直接获取。对于没有安装Git的用户，可以直接点击Download ZIP下载文件。

我们把下载下来的zip文件解压出来，打开Windows的命令行，进入该目录，然后运行：

electron ./

如果一切顺利，就可以看到应用窗口了。

到这大家肯定有个疑问：这个程序是怎么跑起来的？由于Electron是Node的运行时，所以它的入口是在package.json中的main进行定义的。package.json是程序信息的描述文件，里面声明了程序的名称、简介、版本等信息。

例子中指定的入口文件是main.js，我们打开该文件看下：

里面定义了一个creatWindow方法。在方法里新建了一个浏览器窗口，并且加载了index.html页面，还打开了开发者工具。

应用在初始化完成后就执行creatWindow方法，所以我们就可以看到上面打开应用后的效果。

开发体验如何

基于 Electron的开发，就好像开发一个网页一样，而且能够无缝地使用Node。或者说：就好像构建一个Node app，并通过HTML和CSS构建界面。另外，你只需为一个浏览器(最新的Chrome)进行设计，而不必花费更多的精力去考虑浏览器兼容性。

原理解析

Electron应用是由两种进程组成：主进程和渲染进程。有些模块会工作在其中一个进程上，而有些会在两个进程之上。主进程更多地充当幕后角色，而渲染进程则是应用的每个窗口。

主进程

主进程，通常是一个命名为 main.js 的文件，该文件是每个Electron应用的入口。它控制了应用的生命周期(从打开到关闭)。它能调用原生元素和创建新的(多个)渲染进程，而且整个Node API是内置其中的。

渲染进程

渲染进程是应用的一个浏览器窗口。与主进程不同，它能存在多个并且是相互独立的。它们也能隐藏的。它通常被命名为index.html。它们就像典型的HTML文件，但在Electron中，它们能获取完整的Node API特性。因此，这也是它与其它浏览器不同的地方。

相互通讯

我们知道，Web页面因为安全限制，不能直接访问原生的GUI资源(比如dialog、电源监控)，Electron中也是一样，渲染进程如果想要进行原生的GUI操作，就必须和主进程通讯，请求相应的GUI操作。IPC就为此而生，它提供了进程间的通讯。利用它能在主进程与渲染进程之间传递信息。(虽然渲染进程不能直接操作原生GUI，但它有能力调用Node.js的API，间接就拥有了调用操作系统底层 API 的能力)

Electron应用就像Node应用，它也使用一个package.json文件。该文件能定义哪个文件作为主进程，并因此让Electron知道从何启动你的应用。然后主进程能创建渲染进程，并能使用 IPC让两者间进行消息传递。

如何调试

渲染进程的调试

渲染进程其实就是一个chrome浏览器窗口，其调试与用chrome调试html页面完全一样。通过Ctrl+Shift+I快捷键调出开发者工具就可以进行调试了。

主进程的调试

为了提供一种方法来调试主进程中的脚本，Electron提供了 --debug 以及 --debug-brk 的选项开关。

命令行开关

使用如下的命令行开关来调试Electron的主进程：

--debug=[port]

当这个开关用于Electron时，它将会监听V8引擎中有关port的调试器协议信息。默认的port是5858。

--debug-brk=[port]

就像--debug一样，但是会在第一行暂停脚本运行。

使用VS Code来调试

1. 在VS Code中打开Electron工程，通过快捷键Ctrl+Shift+B设置VS Code的任务运行程序，用于启动electron。

2. 点击“配置任务运行程序”按钮，选择Others选项

3. VS Code会自动生成一个task.json文件

4. 将task.json中的command改为“electron”，args改为“[“—debug-brk=5858”,”.”]”

现在我们就可以直接通过快捷键Ctrl+Shift+B来运行程序了

5. 切换到调试视图

6. 点击配置按钮，选择Node.js环境，VS Code会自动生成launch.json配置文件

7. 打开主进程对应的main.js文件，在需要的地方加上断点：

8. 切换到调试视图，选择附加到进程，并点击启动按钮启动调试

9. 通过快捷键Ctrl+Shift+B启动应用进行调试，下面就会自动停止到第一段代码处

10. 接下来就可以像在浏览器中调试js一样进行调试了。

打包应用

应用开发完了要给别人用就需要将应用打包。Electron是用electron-packager模块来打包的。

1. 运行npm install electron-packager --save-dev命令安装electron-packager模块

electron-packager的打包基本命令是：

electron-packager --platform= --arch= [optional flags...]

参数说明：

• sourcedir：项目所在路径

• appname：打包的项目名字

• platform：你要构建哪个平台的应用(Windows、Mac还是Linux)

• arch：决定构建哪个构架下(x86或x64，all表示两者)

2. 项目根目录下面的package.json里添加打包代码

"packager": "electron-packager ./ HelloWorld --platform=win32 --out=./OutApp "

3. 运行命令npm run-script packager打包应用

可以看到在项目目录中多出了一个OutApp文件夹，里面是打包出来的应用文件夹。

运行里面的HelloWorld.exe文件，我们的应用就打开来了。

加密资源

可以看到，在每个包下的resources文件夹里的app文件夹 就是我们写的程序，这样我们的代码就是暴露在用户电脑上的，这非常的不安全，还好electron 自带了加密功能。

1. 运行npm install asar -g命令全局安装asar

2. 运行npm install asar --save-dev命令在项目中安装asar

3. 安装成功后就可以使用asar命令来讲程序加密打包了。进入我们上面打包出来的应用的resources目录，运行asar pack ./app app.asar命令将app文件夹加密

4. 在resources目录中就生成了app.asar文件

5. 删除多余的app文件夹

喜欢我的文章就关注我吧，有问题可以发表评论，我们一起学习，一起进步