nsNiuniuSkin从发布之初，因其简单、简洁、高效，受到了非常多公司的青睐，现在已经越来越多的公司采用我们的这套解决方案来制作安装包了！
从一个安装包UI插件，逐步演化成一套集美观、安全、简洁、自动化为一体的完整的解决方案，实属不易，感谢所有朋友的信任！
网上有不少关于Electron安装包美化的文章，有使用sciter的，有使用QT的，也有基于我们早期版本进行深度或简单集成的；整体看下来，这些方案多少会有一点问题：
而现在Electron应用非常广泛，Electron应用程序的安装包制作，当然少不了我们；在翻看了electron-builder和electron-updater源码后，再结合反解Electron应用程序的安装包脚本，我们了解了其运作的机制，实现了一套与Electron打包无缝对接的方案，完全支持自动化，兼容electron程序的升级。
之前有了解到有一个朋友做Electron安装包的美化，前后花费了一个月时间的，真的让人痛心！希望有了我们的方案，大家能够在一天内完成安装包的制作以及升级功能的对接。
在实际介绍nsNiuniuSkin的Electron安装包制作方案之前，我们需要讲清楚几个原理：
electron-builder内置了很多模板化的nsis脚本，在package.json中的关于nsis的设置，将会通过参数的形式，结合模板，最终形成完整的打包脚本，进而生成安装包。 如果你有想不明白的打包与升级的问题，基本都可以在electron-builder的源码中找到相关的答案或者资料。
此处我们只讲全量更新，electron-updater升级流程如下：
知道了Electron打包与升级的逻辑，我们的Electron打包方案就变的容易了，处理细节较多，这里我们主要介绍几个技术要点：
有人会说Electron自己的打包就是这样，你做的这些有什么意义呢？
意义非常大，且听我道来：
说了这么多，都是理论性的东西，直接看脚本和效果吧，不需要复杂的配置，直接执行打包脚本即可。
在打包脚本目录下，我们提供了一份名叫NiuNiuCaptureElectronDemo的electron源码，其中已经包含了基本的打包脚本package.json的配置，以及基本的升级相关的代码。
package.json的部分配置如下：
{
"name": "TestCapture",
"version": "1.0.0",
"main": "main.js",
"description": "",
"author": "support@leeqia.com",
"build": {
"appId": "appid",
"nsis": {
"guid": "Test_Capture"
},
"extraFiles": [
"capture"
],
"win": {
"target": "dir",
"icon": "app.ico"
},
"publish": [
{
"provider": "generic",
"url": "http://127.0.0.1:8080/upload/"
}
]
}
}
上述打包脚本配置，表示我们的一些核心配置如下：
同时我们提供了一份build-for-electron.bat的脚本，默认已经配置成正常打包NiuNiuCaptureElectronDemo下的应用程序；脚本部分代码如下（实际应用中只需要修改大概4-5个字段，output_setup_prefix、electron_build_path、shell_all_user_mode、install_execution_level）：
@rem 打包脚本项目名称
@set project_name=leeqia_general
@rem 安装包名前缀
@set output_setup_prefix=LeeqiaCapture_PC_Setup_
@rem 主程序名称 (可根据你的项目自行调整)
@set main_exe_name=TestCapture.exe
@rem electron程序中打包的guid，用于安装在注册表中的key（卸载与软件信息）
@set electron_guid=
@rem 软件版本号
@set electron_app_version=
@rem 是安装到所有用户下，还是安装到当前用户下，all/current
@set shell_all_user_mode=all
@rem 安装包的启动权限，user/admin
@set install_execution_level=admin
@rem electron项目所在目录
@set electron_build_path=.\NiuNiuCaptureElectronDemo
@set electron_unpacked_dir=%electron_build_path%\dist\win-unpacked
@rem 读取yml文件，提取版本号和guid信息
.\Helper\NSISHelper.exe --mode="get_electron_app_info" --src="%electron_build_path%\package.json" --dst=".\get_electron_app_version.bat"
Call get_electron_app_version.bat
@echo %electron_app_version%
@echo %electron_guid%
@rem 完整的安装包名称
@set output_setup_file_name=%output_setup_prefix%%electron_app_version%.exe
@rem 打包，生成unpacked files （如果你的打包脚本是其他的，则修改此处，在具体环境中打包可能报错，需要调整package.json中的electron和electron-builder的版本号）
cd %electron_build_path%
call npm run build
执行build-for-electron.bat，就可以开始打包了，他将会做几件事：
以下是我们的打包脚本执行过程：
打包完成后，最终打包出来的安装包程序：
安装效果如下：
开始安装：
安装中：
在上一节中，我们已经打出来了1.0.0版本的安装包LeeqiaCapture_PC_Setup_1.0.0.exe，并且已经安装到电脑上进行使用；接下来我们演示一下打出新的版本，放到升级目录下，触发旧版本的升级。
我们先需要搭建一个简单的静态http服务器，安装http-server模块即可。
安装后，我们新建立目录e:\testweb\update，然后在e:\testweb目录下下执行：
http-server
此时升级服务器就算是准备好了。
我们将package.json中的version字段改为1.0.1，并再次执行build-for-electron.bat进行打包，此时我们会得到两个文件：
我们将打好的安装包和升级文件复制到e:\testweb\update目录下，然后运行之前安装好的1.0.0版本的测试程序：
此时将会弹出检测到新版本的安装包，是否进行升级的提示，点击确认，升级就开始了，升级完成后，会自动再次拉起主程序来。
如果之前已经通过electron打包发布了的程序，替换成由nsNiuniuSkin打的安装包，要如何与旧的版本完全兼容呢？
这是非常重要的一点，也是众多Electron开发者在切换安装包打包工具时的困惑所在。
我们之所以要读取package.json中的guid，就是想要实现与旧版本兼容。只要知道了它，我们就能够在脚本中定位原来旧的Electron安装包的安装位置，可以进一步进行覆盖安装。
当然要处理的细节还是比较多的，比如：
不光如此，类似的其他方案制作的安装包，要无缝的切换成我们的安装包方案，也是很简单的：
我们在脚本中内置了注册表key的默认值，只需要将其修改成您旧的程序写的key即可确保读写用的是同一个键值。
在我们的打包方案中，我们提供了两种形式的打包脚本，同时兼顾不同场景的打包需求：
之所以称之为主动打包，是因为打包的触发入口是在我们的打包入口脚本中，我们提供了一个叫build-for-electron.bat脚本，在其中只要配置好以下几点，就可以开始打包了（上面的示例已经介绍）：
被动打包的意思是说打包的触发点不在我们这边，而是有其他流程已经打出来了unpacked files，并且已经复制到了我们要打包的目录下，需要调用我们的脚本打包成最终的安装包，同时生成latest.yml文件。 如果当前已经有了较为完整的打包自动化流程，只是想切换到nsNiuniuSkin的打包方案中，可以试着在你们的流程中调用build-by-external.bat脚本，并传递指定的参数即可，脚本参数较多，如下：
Call build-by-external.bat project_name electron_guid electron_app_version output_setup_file_name shell_all_user_mode install_execution_level file_pack_path main_exe_name gen_latest
脚本部分代码如下（命令行参数每个参数的解释都在脚本代码中了）：
@rem 此脚本表示外部已经打好electron的unpacked files，并且已经复制到我们的FilesToInstall下，我们只需要相应的打包成最终的安装包即可
@rem 打包脚本名称，如leeqia_simple，对于于SetupScripts目录下的具体文件夹名称
@set project_name=%1
@rem electron中配置的guid，用于指定注册表中的key
@set electron_guid=%2
@rem 软件版本号
@set electron_app_version=%3
@rem 完整的安装包名
@set output_setup_file_name=%4
@rem 是安装到所有用户下，还是安装到当前用户下，all/current
@set shell_all_user_mode=%5
@rem 安装包的启动权限，user/admin
@set install_execution_level=%6
@rem 等待打包文件所在目录名，默认为FilesToInstall
@set file_pack_path=%7
@rem 主程序EXE名称
@set main_exe_name=%8
@rem 是否生成latest.yml，用于electron相关程序的打包
@set gen_latest=%9
@rem 注册表中安装包位置存储的key值
@set install_location_key=InstallLocation
看完上述的介绍与演示，是不是觉得非常简单呢？ 所有复杂的逻辑以及需要与electron-updater交互的地方，都由我们安装包制作方案自动完成，提供出统一的接口。
整个过程非常简单，配置build-for-electron.bat中的各个参数(如果你的electron-builder的配置文件还没配置好，也需要配置下)，然后执行此脚本，安装包就打包好了。
你对Electron应用的安装包美化和升级还有什么疑惑么？有机会一起探讨一下吧。
在安装包安装过程中，精美的UI往往能让客户对所安装产品的印象更加深刻，更能体现出软件服务商在用户体验上的专注与用心！ 希望我们的努力，能够让安装包制作再容易一点，再快乐一点！今后Electron程序的打包，就交给我们吧！^_^
愿天下没有难做的安装包！