Electron学习笔记Part3-利用Electron builder应用打包EXE

HelloWorld写完并能够成功运行了，接下来将这个HelloWorld应用打包成exe安装包，这样就可以拿到其他电脑安装运行了，个人总结两种打包方式，其实现原理相同，但过程不同。

目前刚刚实验利用Electron builder工具进行打包，需要安装Electron builder模块，在cmd中执行命令

如图即已安装完成，可至目录中查看安装后的文件

验证electron builder是否安装成功，在cmd中输入build --help，可以获取到帮助信息即为安装成功。

需要在项目文件夹下新建资源文件夹，将程序发布所用的背景图片和图标等资源统一放进资源文件夹进行管理。（打包windows exe需要ico文件像素为256*256）

一、单Json文件方式

1. 直接编辑项目文件夹下的package.json文件，添加
   
   [javascript] view plain copy

    

   1. "author": "",<span style="white-space:pre"> </span>//作者  
   2.  "description": ""<span style="white-space:pre">    </span>//描述  
2. 继续添加electron builder编译所需要的属性
   [javascript] view plain copy

    

   1. "build": {  
   2.     "appId": "com.leon.HelloWorld02",<span style="white-space:pre"> </span>//包名  
   3.     "copyright":"LEON",<span style="white-space:pre">   </span>//版权  
   4.     "productName":"HelloWorld02",<span style="white-space:pre"> </span>//项目名  
   5.     "dmg":{  
   6.       "background":"res/background.png",<span style="white-space:pre">  </span>//背景图片路径  
   7.       "window":{  
   8. <span style="white-space:pre">  //窗口左上角起始坐标  
   9. </span>        "x":100,<span style="white-space:pre">   </span>  
   10.         "y":100,  
   11. <span style="white-space:pre">  </span>//窗口大小  
   12.         "width":500,  
   13.         "height":300  
   14.       }  
   15.     },  
   16.     "win": {  
   17.         "icon": "res/icon.ico"<span style="white-space:pre">    </span>//图标路径  
   18.     }  
   19.   }  
   貌似json文件使用注释会导致一部分编译报错，所以只在文章中写明注释，放到文件中最好将注释删掉。
3. 完成后在项目文件夹中执行cmd命令：build --win --x64（因为我编译的是windows64位版本,electron builder可同时编译MAC和Linux版本，需要在package.json文件中写明相应的参数）
4. 
5. 执行命令后即开始打包，无报错结束后及打包完成。
6. （其中有提示告诉我可以升级electron builder到最新版本）
7. 打包完成后，可以看到项目文件夹中自动生成了两个目录"dist"和"node_modules"，"node_modules"文件夹是空的，因为我是全局安装的electron，"dist"文件夹中包含一个名为"win-unpacked"的文件夹和一个与package.json文件中name属性相同名称的exe文件，这个文件即是最后打包生成的项目安装文件，"win-unpacked"文件夹打开后可看到一堆零散文件，但其中也包含exe的可执行文件，这是未打包的项目目录。
   二、多json文件方式