• Electron打包方式

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

    一、使用electron-builder打包

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

    先安装此工具：

    npm install electron-builder -g

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

    1. "build": {
    2.     "appId": "cc11001100.electron.example-001", // 程序包名
    3.     "copyright": "CC11001100", // 版权相关信息
    4.     "productName": "example-001", // 安装包文件名
    5.     "directories": {
    6.         "buildResources": "build", //指定打包需要的静态资源，默认是build
    7.         "output": "dist" // 安装包生成目录
    8.     },
    9.     "nsis": {
    10.         "oneClick": false, // 是否一键安装
    11.         "language": "2052", //安装语言，2052对应中文
    12.         "perMachine": true, //为当前系统的所有用户安装该应用程序
    13.         "allowToChangeInstallationDirectory": true // 允许用户选择安装目录
    14.     },
    15.     "dmg": {
    16.         "background": "res/background.png", // 背景图片的路径
    17.         "icon": "build/icons/icon.icns", //安装图标
    18.         "iconSize": 100, //图标的尺寸
    19.         "contents": [ //安装图标在安装窗口中的坐标信息
    20.             {
    21.                 "x": 380,
    22.                 "y": 180,
    23.                 "type": "link",
    24.                 "path": "/Applications"
    25.             },
    26.             {
    27.                 "x": 130,
    28.                 "y": 180,
    29.                 "type": "file"
    30.             }
    31.         ],
    32.         "window": {
    33.             // 启动后窗口左上角位置
    34.             "x": 100,
    35.             "y": 100,
    36.             // 启动后窗口的大小
    37.             "width": 500,
    38.             "height": 300
    39.         }
    40.     },
    41.     "mac": {
    42.         "target": [
    43.             "dmg",
    44.             "zip"
    45.         ], //安装包的格式，默认是"dmg"和"zip"
    46.         "category": "public.app-category.utilities" //应用程序安装到哪个分类下，具体有哪些分类可以在苹果官网上找
    47.     },
    48.     "win": {
    49.         "icon": "build/icons/food.png", // 安装包图标，必须为 256 * 256 像素图片
    50.         "target": [
    51.             "target": "nsis",
    52.             "arch": [ // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大，所以建议直接打32的安装包，默认64位。
    53.                 "x64", 
    54.                 "ia32"
    55.             ]
    56.         ]
    57.     },
    58.     "files": [
    59.       "build/**/*",
    60.       "main.js",
    61.       "public/preload.js"
    62.     ],
    63.     "extends": null
    64. }

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

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

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

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

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

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

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

    electron-builder

    即可开始打包：

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

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

    1.   "scripts": {
    2.     "dist": "electron-builder"
    3.   }

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

    1. electron-builder --platform=darwin
    2.  
    3. electron-builder --platform=win32
    4.  
    5. 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文件里。

    解决办法：

    1. "build": {
    2.     "appId": "com.wss.app",
    3.     "directories": {
    4.       "output": "builder"
    5.     },
    6.     "win": {
    7.       "target": [
    8.         "nsis",
    9.         "zip"
    10.       ]
    11.     },
    12.     "files": [
    13.       "build/**/*",
    14.       "main.js",
    15.       "public/preload.js"
    16.     ]
    17. }

    在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中將相關的屬性配置即可

    1. {
    2.   "name": "electron-react",
    3.   "version": "0.1.0",
    4.   "description": "這是用electron和react開發的桌面程序",
    5.   "author": "Samve Duan",
    6.   "main": "main.js",
    7.   "private": true,
    8.   "dependencies": {
    9.     "@testing-library/jest-dom": "^5.16.5",
    10.     "@testing-library/react": "^13.3.0",
    11.     "@testing-library/user-event": "^13.5.0",
    12.     "react": "^18.2.0",
    13.     "react-dom": "^18.2.0",
    14.     "react-scripts": "5.0.1",
    15.     "web-vitals": "^2.1.4"
    16.   },
    17.   "devDependencies": {
    18.     "electron": "^20.0.3",
    19.     "electron-builder": "^23.3.3"
    20.   },
    21.   "scripts": {
    22.     "start": "react-scripts start",
    23.     "build": "react-scripts build",
    24.     "test": "react-scripts test",
    25.     "eject": "react-scripts eject",
    26.     "electron-start": "electron .",
    27.     "dist": "electron-builder"
    28.   },
    29.   "build": {
    30.     "appId": "com.electron.react001",
    31.     "copyright": "electron_react001",
    32.     "productName": "electron_react001",
    33.     "directories": {
    34.       "buildResources": "build",
    35.       "output": "dist"
    36.     },
    37.     "nsis": {
    38.       "oneClick": false,
    39.       "language": "2052",
    40.       "perMachine": true,
    41.       "allowToChangeInstallationDirectory": true
    42.     },
    43.     "dmg": {
    44.       "window": {
    45.         "x": 100,
    46.         "y": 100,
    47.         "width": 500,
    48.         "height": 300
    49.       }
    50.     },
    51.     "mac": {
    52.       "target": [
    53.         "dmg",
    54.         "zip"
    55.       ], 
    56.       "category": "public.app-category.utilities"
    57.     },
    58.     "win": {
    59.       "icon": "build/static/icons/deal.png",
    60.       "target": [
    61.         {
    62.           "target": "nsis"
    63.         }
    64.       ]
    65.     },
    66.     "files": [
    67.       "build/**/*",
    68.       "main.js"
    69.     ],
    70.     "extends": null
    71.   },
    72.   "eslintConfig": {
    73.     "extends": [
    74.       "react-app",
    75.       "react-app/jest"
    76.     ]
    77.   },
    78.   "homepage": ".",
    79.   "browserslist": {
    80.     "production": [
    81.       ">0.2%",
    82.       "not dead",
    83.       "not op_mini all"
    84.     ],
    85.     "development": [
    86.       "last 1 chrome version",
    87.       "last 1 firefox version",
    88.       "last 1 safari version"
    89.     ]
    90.   }
    91. }

    三、分析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

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

    1. npm config set registry https://registry.npm.taobao.org/
    2. 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就行。

  • 相关阅读:
    接口自动化测试 —— 工具、请求与响应
    项目进展（七）-焊接ADS1285及其外围电路，学习芯片的SPI部分
    transformer总结超详细代码篇
    4、敏感词过滤（前缀树）
    var、let、const特点总结
    【2023年11月第四版教材】第13章《资源管理》（第五部分）
    Qt——Qt connect问题
    Java代码审计之ofcms
    Redis系列之什么是布隆过滤器？
    数字化转型 — 新能源汽车 — 生产制造流程 — 总装车间
  • 原文地址：https://blog.csdn.net/duansamve/article/details/126494450