Electron打包方式

分类：菜鸟笔记作者：duansamve

Electron提供了两个打包工具，本文将分别尝试使用两个工具对项目打包，并分析其打出来的包的结构。

一、使用electron-builder打包

https://github.com/electron-userland/electron-builder

先安装此工具：

npm install electron-builder -g

打包前需要先为项目添加一些打包选项，编辑项目根目录下的package.json文件，为其添加build选项：

"build": {
    "appId": "cc11001100.electron.example-001", // 程序包名
    "copyright": "CC11001100", // 版权相关信息
    "productName": "example-001", // 安装包文件名
    "directories": {
        "buildResources": "build", //指定打包需要的静态资源，默认是build
        "output": "dist" // 安装包生成目录
    },
    "nsis": {
        "oneClick": false, // 是否一键安装
        "language": "2052", //安装语言，2052对应中文
        "perMachine": true, //为当前系统的所有用户安装该应用程序
        "allowToChangeInstallationDirectory": true // 允许用户选择安装目录
    },
    "dmg": {
        "background": "res/background.png", // 背景图片的路径
        "icon": "build/icons/icon.icns", //安装图标
        "iconSize": 100, //图标的尺寸
        "contents": [ //安装图标在安装窗口中的坐标信息
            {
                "x": 380,
                "y": 180,
                "type": "link",
                "path": "/Applications"
            },
            {
                "x": 130,
                "y": 180,
                "type": "file"
            }
        ],
        "window": {
            // 启动后窗口左上角位置
            "x": 100,
            "y": 100,
            // 启动后窗口的大小
            "width": 500,
            "height": 300
        }
    },
    "mac": {
        "target": [
            "dmg",
            "zip"
        ], //安装包的格式，默认是"dmg"和"zip"
        "category": "public.app-category.utilities" //应用程序安装到哪个分类下，具体有哪些分类可以在苹果官网上找
    },
    "win": {
        "icon": "build/icons/food.png", // 安装包图标，必须为 256 * 256 像素图片
        "target": [
            "target": "nsis",
            "arch": [ // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大，所以建议直接打32的安装包，默认64位。
                "x64", 
                "ia32"
            ]
        ]
    },
    "files": [
      "build/**/*",
      "main.js",
      "public/preload.js"
    ],
    "extends": null
}

这个要详细的讲一下，这个nsis的配置指的是安装过程的配置，其实还是很重要的，如果不配置nsis那么应用程序就会自动的安装在C盘。没有用户选择的余地，这样肯定是不行的。

关于nsis的配置是在build中nsis这个选项中进行配置，下面是部分nsis配置。

"nsis": {
  "oneClick": false, // 是否一键安装
  "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
  "allowToChangeInstallationDirectory": true, // 允许修改安装目录
  "installerIcon": "./build/icons/aaa.ico",// 安装图标
  "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标
  "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
  "createDesktopShortcut": true, // 创建桌面图标
  "createStartMenuShortcut": true,// 创建开始菜单图标
  "shortcutName": "xxxx", // 图标名称
  "include": "build/script/installer.nsh", // 包含的自定义nsis脚本 这个对于构建需求严格得安装过程相当有用。
},

关于include 和 script 到底选择哪一个 ？

在对个性化安装过程需求并不复杂，只是需要修改一下安装位置，卸载提示等等的简单操作建议使用include配置,如果你需要炫酷的安装过程，建议使用script进行完全自定义。

NSIS对于处理安装包这种东西，功能非常的强大。但是学习起来并不比一门高级语言要容易。

然后在项目的根路径下执行：

electron-builder

即可开始打包：

第一次打包的话会根据不同平台下载一些对应的文件，因为Electron打包是要把Chromium的运行时打包进去的，这也是Electron开发的程序被人诟病的一个地方。哪怕是一个很简单的小玩具，打包出来可能都要好几十M。

如果每次打包的时候都要执行此命令比较麻烦的话，可以为package.json添加一个dist命令：

  "scripts": {
    "dist": "electron-builder"
  }

Electron是跨平台的，这个跨平台是借助的统一的运行时node+Chromium，这俩可不是跨平台的，所以在打包的时候要指定平台然后下载对应平台这俩的版本作为运行时打到包里，如果不指定的话，默认会打适合当前系统环境的包：

electron-builder --platform=darwin
 
electron-builder --platform=win32
 
electron-builder --platform=linux

更多详细选项请查阅GitHub仓库上的文档。

二、electron-builder 打包時可能出現的問題：

1、出现：electron-builder Not allowed to load local resource: file:///E:/workspace/electron/electron-react/dist/setup/electron_react001/resources/app.asar/build/index.html

出现这种情况的两种可能性：

1、html 文件里面加载了file://这样的本地文件；

2、electron-build 并没有将build文件夹打包进去app.asar文件里。

解决办法：

"build": {
    "appId": "com.wss.app",
    "directories": {
      "output": "builder"
    },
    "win": {
      "target": [
        "nsis",
        "zip"
      ]
    },
    "files": [
      "build/**/*",
      "main.js",
      "public/preload.js"
    ]
}

在build配置里面加上files文件，意思是将你想打包的都写在里面。最重要的是main.js一定要在里面。

2、electron-builder打包失败Application entry file “build/electron.js“：

官网文档如图所示：

在这里插入图片描述

在使用react-cra时会把入口（main.js）给改了，解决办法如下，在package.json的build下将extends改成null即可解决问题。

3、出現如下警告：

  • description is missed in the package.json  appPackageFile=E:\workspace\electron\electron-react\package.json
  • author is missed in the package.json  appPackageFile=E:\workspace\electron\electron-react\package.json

解決方式：package.json中將相關的屬性配置即可

{
  "name": "electron-react",
  "version": "0.1.0",
  "description": "這是用electron和react開發的桌面程序",
  "author": "Samve Duan",
  "main": "main.js",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "electron": "^20.0.3",
    "electron-builder": "^23.3.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-start": "electron .",
    "dist": "electron-builder"
  },
  "build": {
    "appId": "com.electron.react001",
    "copyright": "electron_react001",
    "productName": "electron_react001",
    "directories": {
      "buildResources": "build",
      "output": "dist"
    },
    "nsis": {
      "oneClick": false,
      "language": "2052",
      "perMachine": true,
      "allowToChangeInstallationDirectory": true
    },
    "dmg": {
      "window": {
        "x": 100,
        "y": 100,
        "width": 500,
        "height": 300
      }
    },
    "mac": {
      "target": [
        "dmg",
        "zip"
      ], 
      "category": "public.app-category.utilities"
    },
    "win": {
      "icon": "build/static/icons/deal.png",
      "target": [
        {
          "target": "nsis"
        }
      ]
    },
    "files": [
      "build/**/*",
      "main.js"
    ],
    "extends": null
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "homepage": ".",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

三、分析electron-builder打出来的包

electron-builder打包成功的文件会放在项目根目录的dist文件夹下：

这个exe文件就是win平台的运行包，双击即可运行，尝试只将这一个exe文件拷贝到一个单独的文件夹会发现也是可以运行的。

但是这个exe文件实际上是一个压缩文件，点击文件安装后看安裝目录下都有哪些文件：

径直进入resources这个文件夹，这里面有个叫app.asar的文件：

 这个asar格式的文件其实就是一个归档文件，可以安装asar：

npm i asar -g

 然后到这个目录直接解压这个文件：

asar e app.asar app

进去一看，好家伙，整个项目的代码都在这放着呢：

 随便打开一个看下，发现连混淆都没有混淆：

asar格式的文件就是一个归档文件，只不过它的归档方式是采用了另一种结构，但是只需要按照它的结构解包就能得到原始的文件，解包用它提供的命令即可都不用自己写。 

四、使用electron-packager打包

https://github.com/electron-userland/electron-packager

首先将这个工具安装到项目的开发环境依赖：

npm install electron-packager --save-dev

 工具使用的格式为：

electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>

使用electron-packager打包工具打包时，会下载electron的prebuild版本，下载地址是指向国外的，速度非常慢。需要使用淘宝镜像：

npm config set registry https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

或者添加环境变量 

默认情况下， appname 为 当前项目下的 package.json 文件中的 productName 或者 name 字段的值；platform 和 arch 则与主机一致，在 Windows 64位 下打包就是 Windows 64 位的版本。 

最简单的一条打包命令：

electron-packager ./ --all

 命令说明： 

  1. location of project：项目所在路径 
  2. name of project：打包的项目名字 
  3. platform：确定了你要构建哪个平台的应用（darwin, linux, mas, win32） 
  4. architecture：决定了使用 x86 还是 x64 还是两个架构都用，不写的情况下，arch的取值就是打包的电脑的arch值。一般可以取值有：ia32、x64、armv7l、arm64
  5. electron version：electron 的版本 
  6. --overwrite：这些新生成的包，如果你想继续实验其他选项的话，可能是难以删除的，--overwrite参数，会覆盖原有的build，或者，在mac下面，由于权限问题。您也许会用的到下面这条命令：sudo rm -rf electron-quick*
  7. optional options：可选选项
"package-win": "electron-packager ./ AppElectronReact --overwrite --platform=win32 --asar --out=app --electron-version 1.0.0 --prune=true --icon=build/static/icons/deal.png"

 然后直接打包就可以了： 

默认是打包当前平台的版本，如果需要打包其他版本，则通过--platform指定，这里不再详述，直接去GitHub查阅官方文档。

步骤：

1、下载官网Demo

git clone https://github.com/electron/electron-quick-start

2、将build好的Vue包Copy至electron-quick-start实例根目录

3、cd至上步目录中 执行命令 electron-packager . appTest --platform=win32 --arch=x64 --electron-version=8.0.3，因脚本需要下载依赖包，可能会有卡死假象，只要不报错，安静等待即可。（只有第一次因下载会慢，之后光速打包）出现下图即打包成功：

electron-packager打包命令 “electron-packager . appTest --platform=win32 --arch=x64 --electron-version=8.0.3” 中的electron-version=8.0.3,这个版本号必须要跟你安装的electron版本号一致。

如果换源之后在第6步执行打包命令时出现下图出错

是因为淘宝镜像的electron镜像地址是http://npm.taobao.org/mirrors/electron/8.0.3/electron-v8.0.3-win32-x64.zip。而实际请求报404的原因是版本号前多了一个v。

可以使用命令修改：npm config set electron_custom_dir 8.0.3。

五、分析electron-packager打出来的包

这是electron-packager打包出来的代码，同样有个exe程序，不过这里关注的重点仍然是resources文件夹：

进入看一下，只有一个app.asar文件：

 和前面那个打包工具一样，这个打包工具如果不在打包的时候指定--asar的话连归档不会归档，直接就把源代码放在这个路径下了。用asar解包看下它的内容：

进入app看一下，果然正是项目的源码：

六、总结

1. Electron是跨平台的，打包的时候需要区分不同的平台打包。

2. Electron对源代码打包的方式是asar，这是一个归档格式，这意味着源代码并没有加密，逆向成本非常低，解个包能看懂JS和Electron就行。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

如何学习编程？新手菜鸟如何学编程？
学习编程是顺着互联网的发展潮流，是一件好事。新手如何学习编程？其实不难，不过在学习编程之前你得先了解你的目的是什么？这个很重要，因为目的决定你的发展方向、决定你的发展速度。
it行业都是什么工作？it行业主要做什么？
IT行业是什么工作做什么？IT行业的工作有：产品策划类、页面设计类、前端与移动、开发与测试、营销推广类、数据运营类、运营维护类、游戏相关类等，根据不同的分类下面有细分了不同的岗位。
女生学Java好就业吗？女生适合学Java编程吗？
女生学Java好就业吗？女生适合学Java编程吗？目前有不少女生学习Java开发，但要结合自身的情况，先了解自己适不适合去学习Java，不要盲目的选择不适合自己的Java培训班进行学习。只要肯下功夫钻研，多看、多想、多练
mysql-connect-confused
Can’t connect to local MySQL server through socket \'/var/lib/mysql/mysql.sock问题 1.进入mysql路径
oracle基本命令
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 sqlplus / as sysdba 2.普通用户登录
shell判断服务是否启动
一、背景 因为项目中需要通北京网络，所以需要连vpn，但是服务器有时候会断掉，所以写个shell脚本每五分钟去判断是否连接，于是就有下面的shell脚本。
SQL BETWEEN 操作符
BETWEEN 操作符选取介于两个值之间的数据范围内的值。这些值可以是数值、文本或者日期。
​​windows上传ipa到开发者中心app store的方法
假如你已经使用过苹果开发者中心上架app，你肯定知道在苹果开发者中心的web界面，无法直接提交ipa文件，而是需要使用第三方工具，将ipa文件上传到构建版本，开...
SQL 入门篇之什么是别名？
下面的 SQL 语句指定了两个别名，一个是 name 列的别名，一个是 country 列的别名。**提示：**如果列名称包含空格，要求使用双引号或方括号：
windows上传ipa文件到app store的方法​
在使用H5混合开发的app打包后，需要将ipa文件上传到appstore进行发布，就需要去苹果开发者中心进行发布。​
SQL AND & OR 运算符
+----+--------------+---------------------------+-------+---------+
C++ 数组
数组的声明并不是声明一个个单独的变量，比如 number0、number1、...、number99，而是声明一个数组变量，比如 numbers，然后使用 nu...
最全iOS 应用上架流程提交到AppStore
第一步：到appuploader官网下载辅助工具和iCloud驱动，使用前面创建的AppID登录。
SQL ALTER TABLE 语句
如需删除表中的列，请使用下面的语法（请注意，某些数据库系统不允许这种在数据库表中删除列的方式）：
dism操作巨慢
前不久在制作win11pe，制作了一版，1.26GB，太大了，不满意，想再裁剪下，发现这次dism mount正常，commit或discard巨慢，以前都很快...
三种方法卸载Symantec Endpoint Protection 赛门铁克
赛门铁克各个版本概览：https://knowledge.broadcom.com/external/article?legacyId=tech163829
python3.6、python3.10用什么版本的pip
实测Python 3.6.6用pip 21.3.1，再高就报错了，Python 3.10.7用pip 22.3.1是可以的
博通和诺顿
Broadcom Corporation （博通公司，股票代号AVGO）是全球领先的有线和无线通信半导体公司。其产品实现向家庭、 办公室和移动环境以及在这些环境...
高版本c4d在低版本windows系统上打开后不显示窗格
发现个问题，server2016上安装了c4d这些版本，低版本的正常显示窗格，但红色圈出的高版本c4d打开后不显示窗格，
基础网络windows不要使用TAT、如何卸载TAT
TAT：https://cloud.tencent.com/document/product/1340
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot