程序员打包electron

‘壹’ 如何搭建Electron开发环境

electron自动更新的时候，在electron的官方文档auto-updater 中，提到了在几个平台mac，linux，windows下electron 的自动更新方法，其中windsow平台上面，文章中建议先用grunt-electron-installer 模块来创建windows安装包，grunt这个工具是由Squirrel集成的。进而了解下Squirrel这个工具，
一个可以用来给electron应用的安装更新卸载添加快捷方式的工具。本文主要提及如何在windows平台下，用Squirrel创建electron的.exe安装包。

创建nuget包

我们的方法是使用nuget工具创建Nuget包，再使用Squirrel工具创建.exe。

下载squirrel.exe和nuget.exe，也可以选择直接安装Squirrel.Windows （需要有vitual
studio环境）。
2.新建文件夹如my-build，把下载好的squirrel.exe，nuget.exe和setup.exe

放进去，在文件夹放入我们未打包的electron应用，如下图：

4.在my-build根目录中，打开命令行执行nuget spec

如下图：

生成 spec包初始文件

5.编辑器打开 Package.nuspec，按照自己项目的需要编辑这个文件，如下图：

这里需要注意：根据Squirrel文档说明，target folder 属性需要设置为lib/net45，否则并没有用；<iconUrl>标签用来制定未来的exe的icon。

5.用下面的命令创建一个nuget包，

nuget pack Package.nuspec

如下图：

之后在目录中会出现这个包

命名规则就是<my_app_name>.<version>.nupkg

创建安装程序

把应用程序打包成nuget包之后，就可以用squirrel创建一个安装程序了。在根目录打开命令行，执行以下命令：

squirrel --releasify <my_app_name>.<version>.nupkg

这个时候命令行中没有任何提示。但是别慌，编译一段时间后程序会创建一个release文件夹，里面有三个文件，nuget包，RELEASES 文件和安装文件Setup.exe。如下图：

如果没有出现这三个文件，可以查看目录中的SquirrelSetup.log，根据里面的报错，来进行调试。

注意上面这条squirrel 命令，可以用来设置setup.exe在安装过程中用传统icon还是用自定义的图片文件。使用Squirrel --help可以查看更多帮助

发布应用和安装应用

把上一步生成的setup.exe发送给想要安装这个应用的用户，就可以了。

最终应用会被安装在C:\Users\Administrator\AppData\Local\[appname] 文件夹中，注意Squirrel 的日志文件也存在目录中，调试安装问题的时候非常有用。

双击我们的setup.exe进行安装app的测试，如果中途有任何出错，在

C:\Users\Administrator\AppData\Local\SquirrelTemp 里面可以看到安装日志。如下图：

安装之后打开C:\Users\Administrator\AppData\Local 目录，可以看到app安装在这里，如下图：

自动创建快捷方式

进入我们安装之后的文件夹，命令行进入C:\Users\Administrator\AppData\Local\[your appname]，执行 Update.exe --help ，可以看到

不知道从上图你有没有得到什么提示，反正我发现了，在命令行手动创建快捷方式的命令是Update.exe --createshortcut electron\electron.exe -i [your ico toute]\app.ico

所以，如果我们想让应用在安装过程中静默地创建好快捷方式，那就需要在app的安装之后相反设法执行这句代码。

因为我们的.exe会在安装之后自动打开程序，所以我在程序的入口main.js，添加sqruieel事件的监听就好了。

‘贰’ grunt打包的electron桌面应用，怎么实现自动更新

1、系统：windows7 64位操作系统
2、使用electron-boilerplate-vue脚手架，其中electron为v1.2.1，vue为v1.0.25
3、使用electron-packager和grunt-electron-installer打包成安装文件，以及 Squirrel.Windows
4、请先安装vs2015,并配置系统变量，保证Squirrel.Windows的安装环境

‘叁’ 如何将electron框架开发的软件包打包成单一exe文件

一步一步的跟着做：单击File，选择NEW，然后点击旁边的树形的Archive选项卡，然后再Archive选项卡中选择AppletJAR，取个名字，然后直接点击Finish，这个时候运行一下程序，让其编译一下，会在源码中得到一个.JAR文件，有了这个文件以后，就可以停止程序，接着在单击File，选择NEW，还是点击Archive选项卡，这次选择ExecutableJAR，然后取名字，再点击JARFile输入框后面的按钮，找到刚才生成的.JAR文件，添加进去，一路NEXT，最后Finish以后，再次运行程序，这个时候就会在源码文件夹中多出啦两个.exe文件，一个是通过控制台运行的，一个是直接运行的，同样，exe文件要想运行，还是需要JDK，不过这里建议不要使用sun公司下载的JDK，直接使用Jbuilder里面的JDK～

‘肆’ 怎么将网页打包成桌面应用（web前端页面

在 HTML5的崛起、javaScript要一统天下之际，有一个名为【跨平台】的技术越来越火。为什么会这么火？因为软件开发者只需一次编写程序，即可在 Windows、Linux、Mac、IOS、Android 等平台运行，大大降低了程序员的工作量，也使公司的产品可以快读迭代。曾经跨平台技术的不被看好，如今随着手机、电脑硬件的发展而快速发展。这一切，几乎由HTML5技术推动，当然，JavaScript 这个语言，是最大的功臣。

基于 HTML5 的跨平台技术比较出名的有 PhoneGap、Cordova，常常用于开发 webapp；还有 Egret、Cocos-creator、Unity 等，常用于开发游戏；还有基于 Node.js 的 nw.js，用于开发桌面应用，以及 Electron，一款比 nw.js 还强大的用网页技术来开发桌面应用的神器。

其实，以上都是废话，现在进入主题：怎么用 Electron 将网页打包成 exe 可执行文件！

假设：

1、你已经安装并配置好了 node.js （全局安装）

2、你已经用 npm 安装了 electron （全局安装）

3、你已经写好了前端网页（html、css、javascript 这些，或者基于这些的前端框架写好的网页）

4、以上三点看不懂的，赶紧去网络。。。

你如果具备了以上的假设，请继续往下看：

1、找到你的前端网页项目文件夹，新建 package.json、main.js、index.html 三个文件（注：其中的 index.html 是你的网页首页）

你的项目目录/
├── package.json
├── main.js
└── index.html

2、在 package.json 中添加如下内容

{
"name" : "app-name",
"version" : "0.1.0",
"main" : "main.js"}

3、在 main.js 中添加下面的内容，这个 main.js 文件就是上面 package.json 中的 "main"键 的值，所以可根据需要修改

const {app, BrowserWindow} = require('electron')const path = require('path')const url = require('url')// Keep a global reference of the window object, if you don't, the window will// be closed automatically when the JavaScript object is garbage collected.let winfunction createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})

// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))

// Open the DevTools.
// win.webContents.openDevTools()

// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready', createWindow)// Quit when all windows are closed.app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}})app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}})// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.

4、如果你的网页首页的文件名不是 “index.html”，那么请在 main.js 中将其中的 'index.html' 修改为你的网页首页名

5、打开 DOS，cd 到你的项目目录（或直接在你的项目目录下空白的地方 shift+鼠标右键，然后点击在此处打开命令窗口，这里看不懂的，唉，网络吧少年）

6、在上一步的 DOS 下，输入npm install electron-packager -g全局安装我们的打包神器

npminstallelectron-packager-g

7、安装好打包神器后，还是在上一步的 DOS 下，输入electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_moles 即可开始打包

electron-packager . app --win --out presenterTool --arch=x64
--version 1.4.14 --overwrite --ignore=node_moles

这个命令什么意思？蓝色部分可自行修改：

electron-packager .可执行文件的文件名--win --out打包成的文件夹名--arch=x64位还是32位--version版本号--overwrite --ignore=node_moles

以上是最简单的打包方式，至于怎么修改窗口大小、菜单栏怎么加、怎么调用系统API这些，就给你慢慢去研究Electron了。

如果你打包总是不成功，觉得很烦，同时对扩展功能没什么要求的话，

里面有我已将内容为 hello,world 的 index.html 网页通过 Electron 框架打包为 windows 环境下的桌面应用。

现只需将你的网页前端项目复制到 /resources/app/project 目录下，双击 exe 文件即可以桌面应用的方式运行你的网页。

‘伍’ electron在win上可运行后，如何打包到linux上运行

你添加的是虚拟硬盘吗
那你肯定添加的是scsi口的
把硬盘接口换成ide的
即可解决
我直接给你图
看明白了吗
最后一定用ide的
因为你的linux版本低
不支持
scsi磁盘

‘陆’ 如何将electron框架开发的软件包打包成单一exe文件

前言：研究electron自动更新的时候，在electron的官方文档auto-updater 中，提到了在几个平台mac，linux，windows下electron 的自动更新方法，其中windsow平台上面，文章中建议先用grunt-electron-installer 模块来创建windows安装包，grunt这个工具是由Squirrel集成的。进而了解下Squirrel这个工具，
一个可以用来给electron应用的安装更新卸载添加快捷方式的工具。本文主要提及如何在windows平台下，用Squirrel创建electron的.exe安装包。

创建nuget包

我们的方法是使用nuget工具创建Nuget包，再使用Squirrel工具创建.exe。

1.下载squirrel.exe和nuget.exe，也可以选择直接安装Squirrel.Windows （需要有vitual
studio环境）。

2.新建文件夹如my-build，把下载好的squirrel.exe，nuget.exe和setup.exe

放进去，在文件夹放入我们未打包的electron应用，如下图：

4.在my-build根目录中，打开命令行执行nuget spec

如下图：

生成 spec包初始文件

5.编辑器打开 Package.nuspec，按照自己项目的需要编辑这个文件，如下图：

这里需要注意：根据Squirrel文档说明，target folder 属性需要设置为lib/net45，否则并没有用；<iconUrl>标签用来制定未来的exe的icon。

5.用下面的命令创建一个nuget包，

nuget pack Package.nuspec

如下图：

之后在目录中会出现这个包

命名规则就是<my_app_name>.<version>.nupkg

创建安装程序

把应用程序打包成nuget包之后，就可以用squirrel创建一个安装程序了。在根目录打开命令行，执行以下命令：

squirrel --releasify <my_app_name>.<version>.nupkg

这个时候命令行中没有任何提示。但是别慌，编译一段时间后程序会创建一个release文件夹，里面有三个文件，nuget包，RELEASES 文件和安装文件Setup.exe。如下图：

如果没有出现这三个文件，可以查看目录中的SquirrelSetup.log，根据里面的报错，来进行调试。

注意上面这条squirrel 命令，可以用来设置setup.exe在安装过程中用传统icon还是用自定义的图片文件。使用Squirrel --help可以查看更多帮助

发布应用和安装应用

把上一步生成的setup.exe发送给想要安装这个应用的用户，就可以了。

最终应用会被安装在C:\Users\Administrator\AppData\Local\[appname] 文件夹中，注意Squirrel 的日志文件也存在目录中，调试安装问题的时候非常有用。

双击我们的setup.exe进行安装app的测试，如果中途有任何出错，在

C:\Users\Administrator\AppData\Local\SquirrelTemp 里面可以看到安装日志。如下图：

安装之后打开C:\Users\Administrator\AppData\Local 目录，可以看到app安装在这里，如下图：

自动创建快捷方式

进入我们安装之后的文件夹，命令行进入C:\Users\Administrator\AppData\Local\[your appname]，执行 Update.exe --help ，可以看到

不知道从上图你有没有得到什么提示，反正我发现了，在命令行手动创建快捷方式的命令是Update.exe --createshortcut electron\electron.exe -i [your ico toute]\app.ico

所以，如果我们想让应用在安装过程中静默地创建好快捷方式，那就需要在app的安装之后相反设法执行这句代码。

因为我们的.exe会在安装之后自动打开程序，所以我在程序的入口main.js，添加sqruieel事件的监听就好了。如下图：

我顺便把程序卸载时，删除快捷方式的监听事件也写了进去。还有程序的更新和删除事件监听，但是这两个事件，我还没有进行测试。

更新应用

其实我一直很想做增量更新，在这里我的更新方法有两个，第一是在程序的入口添加js，发送请求到服务器，拉取更改文件进行本地替换，但是如果是node_mole依赖包的更改，这个方法并不可行。第二个方法比较安全而且快捷通过发布一个版本号不同的exe，如下：1.在这个创建安装程序的步骤2中，我们把程序代码都复制到了这个文件夹里面，如下图：

如果后续我们的程序要进行更新，首先我们需要把更改的文件直接复制替换到这个文件夹。

2.打开Package.nuspec，编辑version标签

3.参考本文种中创建安装程序部分的步骤2-4，重新生成setup.exe，发布应用。

通过执行setip.exe安装，程序会自动删除之前的应用，但是我并不清楚，sqruieel 是进行了增量替换，还是将之前的整个应用进行删除，再重新安装。

创建自定义安装包

在上一步，我们已经把自己的exe发布出来了，但是如果没有自定义名字跟icon，好像还不够酷，所以我们需要创建自定义的安装文件。

1.下载安装 Resource
Hacker

2.打开这个项目目录，在electron.exe上面右键

出现菜单，点击 Open using Rescource Hacker。

3.Resource Hacker应用运行之后中，在以下界面中选择Icon，然后在工具栏里面选择Action，Replace
Icon，如下图：

然后选择自己想要替换的.ico文件就好

4.这其实并不够，我们还需要更换exe里面的版本信息，打开Version
Info，把FileDescription和ProctName改成我们自己的项目名称，最好把SquirrelAwareVersion也更改一下，毕竟是版本号。

5.做完这些之后，我们需要按照之前的步骤，在命令行中输入

nuget pack Package.nuspec

重新生成nuget包，然后再使用

squirrel --releasify <my_app_name>.<version>.nupkg 命令创建安装文件。

6.打开之后生成的releases文件夹，参考本文种中创建安装程序部分的步骤2-4，对setup.exe进行自定义。

最后，一个可以自动更新又安装便捷，还有我们自己的酷酷的图标跟名字的应用就生成拉！

‘柒’ electron打包桌面应用程序打包成安装包安装包，怎么打包

第一步，配置 package.json 第二步，编译 build --win --ia32 builder 支持编译成多种格式等等功能

‘捌’ 有没有把网页转换成可执行文件的网页

在
HTML5的崛起、JavaScript要一统天下之际，有一个名为【跨平台】的技术越来越火。为什么会这么火？因为软件开发者只需一次编写程序，即可在
Windows、Linux、Mac、IOS、Android
等平台运行，大大降低了程序员的工作量，也使公司的产品可以快读迭代。曾经跨平台技术的不被看好，如今随着手机、电脑硬件的发展而快速发展。这一切，几乎由HTML5技术推动，当然，JavaScript
这个语言，是最大的功臣。

以上是最简单的打包方式，至于怎么修改窗口大小、菜单栏怎么加、怎么调用系统API这些，就给你慢慢去研究Electron了。

‘玖’ electron在win上可运行后，如何打包到linux上运行

1、如果只是需要运行起来，不需要打包，那么可以在linux建文件夹，npm安装对应包，然后将win下的代码拷贝到对应位置即可运行。

2、如果需要打包，则比较复杂。大致为：

a) 建app文件夹，将代码(含index.js文件）拷贝到其中。

b) npm安装asar，用asar的pack命令，将app文件夹打包成一个文件app.asar

asar pack app app.asar

c) 在网页链接 下载对应版本的linux预编译二进制包，解压，用上面生成的app.asar替换resources文件夹下同名文件。

d) 修改chrome-sanbox文件权限及属主:

sudochownroot:rootchrome-sandbox
sudochmod4755chrome-sandbox

e) ./electron即可运行