一、安装及打包
1.安装node.js和npm(略)
2.安装electron-builder
1 2 npm install electron-builder --save-dev
3.添加脚本
package.json
1 2 3 "scripts" : { "dist" : "electron-builder --win --x64" } ,
4.运行打包命令
自动从网上下载winCodeSign、nsis和nsis-resources文件到C:\Users\algz\AppData\Local\electron-builder\Cache 目录。(由于外网原因会下载失败,需手动下载文件,详细见“二、打包时的网络问题”)
5.package.json 全部配置说明(可选)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 "scripts" : { "dist" : "electron-builder --win --x64" } , "build" : { "appId" : "avicit.sysfamily.modsim" , "productName" : "ModSim" , "copyright" : "Copyright © 2024 Avicit" , "directories" : { "buildResources" : "assets" , "output" : "release/${version}" } , "win" : { "icon" : "./public/icons/modsim.png" , "target" : [ { "target" : "zip" , "arch" : [ "x64" ] } ] , "artifactName" : "${productName}-Windows-${version}.${ext}" } , "linux" : { "icon" : "./public/icons/modsim.png" , "target" : [ "zip" ] , "artifactName" : "${productName}-Linux-${version}.${ext}" } , "mac" : { "category" : "public.app-category.utilities" , "target" : [ "dmg" ] , "artifactName" : "${productName}-Mac-${version}.${ext}" } , "nsis" : { "oneClick" : false , "allowElevation" : true , "allowToChangeInstallationDirectory" : true , "installerIcon" : "./build/icons/install.icon" , "uninstallerIcon" : "./build/icons/install.icon" , "installerHeaderIcon" : "./build/icons/install.icon" , "createDesktopShortcut" : true , "createStartMenuShortcut" : true , "shortcutName" : "图标名称" , "perMachine" : false , "language" : "2052" } , "publish" : [ { "provider" : "generic" , "url" : "http://xxxxxx/" } ] , "files" : [ "dist/**/*" , "dist-electron/**/*" ] , "asar" : true , "extraResources" : [ { "from" : "modsim-glsp-server/" , "to" : "server" } ] }
二、打包时的网络问题
在electron使用electron-builder打包过程中需要用到几个github上的包,但是由于网络原因,下载不下来,导致出错;
1. electron-v30.0.8-win32-x64.zip (配置国内源,可自动下载)
导致的原因:
An existing connection was forcibly closed by the remote host.
远程主机强制关闭了现有的连接。
A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond.
连接尝试失败,因为被连接方在一段时间后没有正确响应,或者建立的连接失败,因为连接的主机没有响应。
解决方法二种:
(1) 手动下载zip文件,放到相应目录中。(不解压)
[!NOTE]
macOS: ~/Library/Caches/electron
Linux: ~/.cache/electron
windows: c:/user/xxx/AppData/Local/electron/Cache
(2) 配置国内源
项目目录下新建.npmrc 文件,添加以下内容 (找国内镜像,npmmirror 中国镜像站。),执行打包命令自动下载。
2. winCodeSign-2.6.0.7z (需手动下载)
配置国内源不会访问,需手动下载并解压到指定目录。
下载地址:https://github.com/electron-userland/electron-builder-binaries/releases/download/winCodeSign-2.6 .0/winCodeSign-2.6.0.7z
下载后解压放到对应的目录%LOCALAPPDATA%/electron-builder/Cache/winCodeSign/winCodeSign-2.6.0
3. nsis-3.0.4.2.7z (需手动下载)
配置国内源不会访问,需手动下载并解压到指定目录。
下载地址:https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.2/nsis-3.0.4.2.7z
直接放到对应的目录里面 `%LOCALAPPDATA%/electron-builder/Cache/nsisnsis-3.0.4.2
4. nsis-resources-3.4.1.7z (需手动下载)
配置国内源不会访问,需手动下载并解压到指定目录。
下载地址:https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z
直接放到对应的目录里面
1 windows : %LOCALAPPDATA %/electron-builder/ Cache /nsisnsis-resources-3.4 .1
再次打包:
成功!!!
三、devDependencies与dependencies的区别
dependencies 表示我们要在生产环境下使用该依赖,
devDependencies 则表示我们仅在开发环境使用该依赖。
在打包时,一定要分清哪些包属于生产依赖,哪些属于开发依赖,尤其是在项目较大,依赖包较多的情况下。