Electron打包（windows平台）

** 注：不能夸平台打包，只能在该平台上打包该平台的应用，比如windows系统只能打包windows平台的,不能在windows系统打包Mac或者Linux平台的应用 **

一、设置npm环境（为了解决打包时下载某些依赖包慢、下载不了的问题）：

连接：https://blog.csdn.net/u013116210/article/details/107788738

二、使用electron-packager打包：

使用electron-packager打包特点：操作简单，打包后的目录就是程序的运行目录，相当于已经安装过，不用安装操作后才能运行，如果需要打包成安装器，需要使用electron-builder打包。

1、安装electron-packager

npm install electron-packager --save-dev

npm install electron-packager -g

2、快速打包命令：

electron-packager .

3、使用配置文件打包：

在项目的package.json文件中的scipts节点中添加代码
基本代码命令说明：
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --out=out --icon=assets/app.ico --asar --overwrite --ignore=.git
说明：

• sourcedir：项目源文件所在路径（唯一的必须参数）
• appname：项目名称（直接使用package.json文件中的name属性更方便）
• platform：要构建哪个平台的应用（Windows、Mac 还是 Linux）
• arch：构建架构 包含ia32,x64,armv7l,arm64
• out：打包后的地址
• icon：打包图标
• asar：是否生成app.asar, 不然就是自己的源码
• overwrite：覆盖上次打包
• ignore：不进行打包的文件

打包的路径不能出现中文或者特殊字符，第一次打包需要下载二进制的包耗时会久一些，以后走缓存就快的多了。

下面是在设置了比较简单的打包代码（在scipts节点添加下面代码）：
"packager": "electron-packager ./ testapp --win --out ./outputs"

• ./：sourcedir，项目路径
• testapp：appname，打包后可执行程序(.exe)的名字
• –win：platform，构建win平台的打包
• –out：打包后的地址，./outputs 就是打包后的地址

4、配置完package.json文件后就可以使用命令npm run packager打包了

如：

打包后跟目录生成outputs文件夹：

目录里面exe就是打包后可执行程序文件，

5、过一段时间再次用electron-packager .的命令重新打包，发现要重新下载electron版本的包，而且特别慢：

参考连接electron的步骤：https://blog.csdn.net/u013116210/article/details/107788738

6、electron下载到本地路径为：

C:\Users\用户名\AppData\Local\electron\Cache

打开文件夹后，发现有点懵（有几个版本号相同的electron，但是放在不同的文件夹，而且这些文件夹名字很长），实际可能是之前各种尝试打包，切换源导致下载多个版本的electron了。看了一下，大概就是没有使用5步骤设置ELECTRON_MIRROR的地址时，默认的就是从https://github.com/electron/electron/releases/download/v版本号/electron-v版本号-win32-x64.zip地址下载保存在https://github.comelectronelectronreleasesdownloadv版本号electron-v版本-win32-x64.zip的文件夹的，从https://github.com/electron/electron/releases/download/v版本号/SHASUMS256.txt下载保存在httpsgithub.comelectronelectronreleasesdownloadv版本号SHASUMS256.txt文件夹

如果设置了ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/ 那么就是从https://npm.taobao.org/mirrors/electron/版本号/xx文件下载 electron版本文件和SHASUMS256.txt文件，然后创建对应的文件夹放在下面。
所以打包时，用命令实在下不了electron，可以去手动去https://npm.taobao.org/mirrors/electron/或者https://github.com/electron/electron/releases下载对应的electron版本文件和SHASUMS256.txt文件，然后在这个路径下，创建对应的文件夹放在文件夹下面就可以了。

三、使用electron-builder打包（比较复杂）

使用electron-builder打包特点：操作相对比较复杂，能够打包成安装器，能自定义打包方式，可以说electron-builder比electron-packager更加高级

1、安装yarn（electron打包依赖yarn）

npm install -g yarn

2、安装electron-builder

npm install -g electron-builder

3、配置package文件

在你的项目根目录中，编辑package.json文件，script节点中添加：
说明(不要复制这里，json文件不能带注释)：

"pack": "electron-builder --dir",//暂时不知道用途，官方的配置
"postinstall": "electron-builder install-app-deps",//编译命令
"dist": "electron-builder",//打包当前平台命令
"dist-win": "electron-builder --win --ia32",//打包windows 32位应用命令，后面使用的yarn dist-win的dist-win就是这里配置的
"dist-win64": "electron-builder --win --x64",//打包windows 64位应用命令
"dist-mac": "electron-builder --mac",//打包mac平台应用命令
"dist-linux": "electron-builder --linux"//打包Linux平台应用命令

复制粘贴代码：

"pack": "electron-builder --dir",
"postinstall": "electron-builder install-app-deps",
"dist": "electron-builder",
"dist-win": "electron-builder --win --ia32",
"dist-win64": "electron-builder --win --x64",
"dist-mac": "electron-builder --mac",
"dist-linux": "electron-builder --linux"

4、在项目的根目录运行编译打包命令

先运行编译命令：
yarn postinstall
再运行
yarn dist-win
简单打包，此时会出现winCodeSign、nsis、nsis-resources文件下载不了的错误

5、下载打包需要依赖的文件：

1）第一次先下载winCodeSign：
出现winCodeSign下载的错误如：

复制dowonloading 那行的下载地址，然后使用IDM下载器或者复制地址在这个GitHub文件加速网站下载相应的文件：https://shrill-pond-3e81.hunsh.workers.dev/

下载地址为：
https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-版本号/winCodeSign-版本号.7z
网址版本号为你使用yarn dist-win命令出现下载问题的文件的版本号,如果是直接复制命令界面里的地址就不需看这个下载地址了

下载完文件然后复制粘贴到这个路径：C:\Users\你电脑的用户名\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-版本号，版本号是你下载的文件的版本号，可以复制下载完的winCodeSign文件名，不要复制后缀名。如果这个路径不存在，那么需要你自己去创建对应路径的文件夹。把文件复制到这个路径下，然后解压。

2）下载nsis包：
上面下载完winCodeSign包并解压到响应的目录后，按Ctrl+C命令退出上面的命令操作，然后重新试用
yarn dist-win命令，于是又发现nsis包文件下载不了。
出现的错误如下：

再次复制dowonloading 那行的下载地址，然后下载。
下载地址为：
https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-版本号/nsis-版本号.7z
下载完，参照winCodeSign包把地址放在路径：C:\Users\你电脑的用户名\AppData\Local\electron-builder\Cache\nsis\nsis-版本号，然后解压

3）下载nsis-resources包：

按照上面步骤，nsis包完成后，然后重新试用yarn dist-win命令出现的下载错误：

参考上面步骤，把nsis-resources下载到这个路径：
C:\Users\你电脑的用户名\AppData\Local\electron-builder\Cache\nsis\nsis-resources-版本号，注意这个nsis-resources是在nsis目录下的，然后解压

后面搜到，原来淘宝镜像有这个三个文件可以下载：https://npm.taobao.org/mirrors/electron-builder-binaries/,所以可以看winCodeSign、nsis、nsis-resources在这个网址有没有对应的版本，如果有就直接从这个网址下载下来。

6、上面操作成功后，再次使用yarn dist-win便会出现：

我这没有报错，说明已经打包成功。
打包成功后，在项目的dist文件夹，打开便会看到下图的这些文件：

其中1是打包后项目程序运行目录如图下，免安装目录，双击目录中的exe目录直接能运行，这个就是网上所说的绿色版程序，不需要安装，复制程序目录到任意目录，打开就能运行。

而2是exe安装程序，要安装后才能运行。可以把他拖到任何目录，双击后自动安装，下面是双击安装器自动安装后的目录：

由于这个yarn dist-win命令也是简单的打包，没有设置具体的打包信息，所以默认会安装在图中1的路径。
图中2是可执行exe文件，打开直接运行；图中3，由于这个目录是安装后的程序目录，所以图中3就是卸载的可执行程序了，
双击该程序然后按确定就可以卸载你的软件了。

7、高级打包配置，前面只是简单实用命令打包项目，都是默认的设置，现在自定义打包配置。

在项目中的package.json文件添加buld节点（记得build前面的配置加分号,）：

说明(不要复制这里，json文件不能带注释)：

"build": {
	"appId": "com.test", // appid
	"productName": "test",// 程序名称
	"files": [ // 需要打包的文件目录，如果根目录有项目的文件，需要把这些文件都写进去，不要的不用写
	  "build/icons/*",
      "src/**/*",
	  "main.js", 
	  "preload.js",
      "renderer.js",
      "index.html",
	  "node_modules/**/*"
	],
	"directories": {
	  "output": "build/app", // 打包输出的目录
	  "app": "./", // package所在路径
	  "buildResources": "assets"
	},
	"nsis": { //nsis安装器配置
	  "oneClick": false, // 是否需要点击安装，自动更新需要关掉
	  "allowToChangeInstallationDirectory":true, //是否能够选择安装路径
      "installerIcon":"./dist/icons/installer.ico",// 安装程序图标（最好用256 × 256以上的图标）
      "installerHeader":"./build/icons/installerHeader.bmp",// 安装时界面头部右边图片，只能用bmp格式的
      "uninstallerIcon":"./dist/icons/uninstall.ico",//卸载程序图标（最好用256 × 256以上的图标）
	  "perMachine": true, // 是否需要辅助安装页面
	   "createDesktopShortcut": true, // 创建桌面图标
	   "createStartMenuShortcut": true,// 创建开始菜单图标
	   "license":"./src/license/license.html" //安装界面的软件许可证，如果不配置，不会出现软件许可证界面
	},
	"win": {
	  "icon":"./dist/icons/aims.ico",//图标文件，分辨率至少在256*256以上，不然会报错
	  "target": [
		{
		  "target": "nsis", // 输出目录的方式
		  "arch": [ // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大，所以建议直接打32的安装包。
		  "x64",
		  "ia32"
		  ]
		}
	  ]
	},
    "linux": { //Linux打包配置，现在只是在windows打包，未测试过
      "icon": "./dist/icons/main.png" //图片当前格式只能是512x512分辨率的
    },
    "mac": { //Mac打包配置，现在只是在windows打包，未测试过
      "target": "dmg",
      "icon": "./dist/icons/main.png" //图标的分辨率至少在512x512以上
    },
    "dmg": { //mac打包dmg格式配置，现在只是在windows打包，未测试过
      "title": "Mac程序",
      "icon": "./dist/icons/main.png",
      "contents": [
        {
          "x": 110,
          "y": 150
        },
        {
          "x": 240,
          "y": 150,
          "type": "link",
          "path": "/Applications" //现在只是在windows打包，未测试过,不清楚该配置是什么
        }
      ],
      "window": {
        "x": 400,
        "y": 400
      }
    },
    "publish": [//版本更新配置，以后有需要的再学习
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080/updata/"
      }
    ]
  }　　

复制粘贴代码：

"build": {
    "appId": "com.test",
    "productName": "test",
    "files": [
      "build/icons/*",
      "src/**/*",
      "main.js",
      "preload.js",
      "renderer.js",
      "index.html",
      "node_modules/**/*"
    ],
    "directories": {
      "output": "build/app",
      "app": "./",
      "buildResources": "assets"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "installerIcon":"./build/icons/installer.ico",
      "installerHeader":"./build/icons/installerHeader.bmp",
      "uninstallerIcon":"./build/icons/uninstall.ico",
      "perMachine": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "license":"./src/license/license.html"
    },
    "win": {
      "icon": "./build/icons/main.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "./build/icons/main.png"
    },
    "mac": {
      "target": "dmg",
      "icon": "./build/icons/main.png"
    },
    "dmg": {
      "title": "Mac程序",
      "icon": "./build/icons/main.png",
      "contents": [
        {
          "x": 110,
          "y": 150
        },
        {
          "x": 240,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        }
      ],
      "window": {
        "x": 400,
        "y": 400
      }
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080/updata/"
      }
    ]
  }

我这里在项目根目录新建了一个build/icons目录放图标的和src/license目录放软件许可协议说明：

nsis配置参考：https://www.electron.build/configuration/nsis

8、再次使用yarn dist-win命令打包，如果没什么意外（我这不知道什么回事，又重新下载了另一个版本的electron），没有报错，出现Done in xx就是打包成功了。

由于配置打包在buil/app目录，打包会在App目录生成以下文件：

• (1)：1是arch配置ia32的打包的32位程序目录
• (2)：2是arch配置x64的打包的64位程序目录
• (3)：3是打包的程序安装器，安装后是64位的程序。

9、上面打包设置打包后的安装器，安装界面：

安装后的目录

运行程序后没问题，说明打包成功啦！(￣▽￣)~*

上面打的包，其安装后的程序大小都是1百多M，比较大了，很可能是包安装的问题，后面学到才来优化。

10、自定义nsis安装器：

从百度和文档可以看到，这个安装器界面还支持自定义的，如果默认的nsis设不满足需求，那么可以自己定义，需要在 nsis 配置中加上 "include":"build/xxx.nsh"或者"script":"build/xxx.nsh",
inclue和script也是有区别的，这里要学习nsh脚本才行，作为一个新手，默认的安装器界面已经够用了，现在仅仅了解，有兴趣的可以搜索学习。

上面使用的demo（已经删除打包后的文件，70多M）连接：
https://download.csdn.net/download/u013116210/12683056

参考：
1、https://github.com/electron/electron-packager
2、https://www.electron.build/
3、https://www.cnblogs.com/silenzio/p/11639960.html
4、https://segmentfault.com/a/1190000016695922
5、https://www.jianshu.com/p/520934cea5ee
6、https://blog.csdn.net/sinat_36422236/article/details/84988291
7、https://www.jianshu.com/p/94d084ce6834