关于前端:不联网的情况下使用-electronbuilder-快速打包全平台应用

前言

Electron 之所以可能日益风靡，是因为其简略易用且对各个操作平台具备良好的反对。

明天我就来分享一下怎么应用一套代码，疾速打包生成各支流平台安装包的教训。

我的项目装置

首先，应用我后面介绍的提效小技巧，设置：

• NPM 源为淘宝镜像源；
• Electron 源为中国镜像网站中的 Electron 源地址。

而后顺次执行以下指令：

mkdir my-electron
cd my-electron
npm init -y
npm install electron@14.2.6 -D
npm install @electron/remote --save
npm install electron-builder -D

打包配置

在 my-electron 目录下的 package.json 中，增加打包配置：

{
  "name": "my-electron",
  "version": "0.1.0",
  "author": "编程三昧",
  "build": {  // electron-builder 配置
    "productName":"myFirstApp",// 我的项目名 这也是生成的 exe 文件的前缀名
    "appId": "xxxxx", 
    "copyright":"xxxx",// 版权信息
    "directories": {"output": "build" // 输入文件夹}, 
    "extraResources":  [{ // 须要读写的配置文件
        "from": "./config/config.json",
        "to": "../config/config.json"
    }],
    "win": {  
        "icon": "xxx/icon.ico"// 图标门路,
        "target":[
            {
                "target": "nsis",
                "arch": ["x64"]
            }
        ]
    },
    "dmg": {
        "contents": [
            {
                "x": 0,
                "y": 0,
                "path": "/Application"
            }
        ]
    },
    "linux": {"icon": "xxx/icon.ico"},
    "mac": {"icon": "xxx/icon.ico"},
    "nsis": {
        "oneClick": false, // 一键装置
        "guid": "xxxx", // 注册表名字，不举荐批改
        "perMachine": true, // 是否开启装置时权限限度（此电脑或以后用户）"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" // 图标名称
    }
  }
}

配置打包脚本

在 package.json 中，增加对应的打包脚本：

{
    …
    "scripts": {
        "dev": "electron . --enable-loggin --no-sandbox",
        "build-64": "electron-builder --win --x64",
        "build-linux": "electron-builder --linux",
        "build-mac": "electron-builder --mac"
    }
    …
}

在 my-electron 目录下关上终端，运行 npm run dev 即可进入开发模式。

对于各平台 Electron 镜像

在有网络的状况下，因为咱们设置了 NPM 镜像和 Electron 源，速度还是很快的。

但我这边是内网打包，没法联网，所以，须要取个巧，在打包开始之前就将对应平台的 Electron 源下载下来放到各自的 NPM 缓存中去。

electron-builder 在打包的时候，会依据零碎的不同去各自的 NPM 缓存目录下查找对应版本的 Electron 源，当咱们将下载好的源放在 NPM 缓存中后，就不须要再去联网拉去了。

我应用的 electron@14.2.6 镜像的下载地址为：https://registry.npmmirror.com/binary.html?path=electron/14.2.6/。

这是 @electron/get 中获取 electron 镜像缓存的示例：

import {downloadArtifact} from '@electron/get';
const zipFilePath = await downloadArtifact({
  version: '14.2.6',
  platform: 'darwin',
  artifactName: 'electron',
  artifactSuffix: 'symbols',
  arch: 'x64',
});

各操作系统对应的 NPM 缓存门路别离为：

• Linux: $XDG_CACHE_HOME or ~/.cache/electron/
• MacOS: ~/Library/Caches/electron/
• Windows: %LOCALAPPDATA%/electron/Cache or ~/AppData/Local/electron/Cache/

留神：Linux x64 和 Linux arm64 对应的 electron 镜像是不同的，

对于开发模式启动不了的问题

开发模式可能启动不了，其起因或者是 my-electron、node_modules 下的 electron 未执行装置，短少 Electron 源。

想要解决，只需执行以下指令：

node ./node_modules/electron/cli.js

期待 electron 镜像拉取实现后，即可失常进入开始模式。

总结

以上就是在不联网的状况下应用 electron-builder 打包全平台桌面利用的记录。

~

~ 本文完，感激浏览！

~

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王 ，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！