When not connected to the Internet, use electron-builder to quickly package full-platform applications

foreword

Electron's growing popularity is due to its ease of use and good support for various operating platforms.

Today I will share the experience of how to use a set of codes to quickly package and generate installation packages for various mainstream platforms.

Project installation

First, use the tips I introduced earlier to improve , and set:

• NPM source is Taobao mirror source;
• Electron source is the Electron source address in the Chinese mirror website.

Then execute the following commands in sequence:

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

Packaging configuration

In the package.json in the my-electron directory, add the packaging configuration:

{
  "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" // 图标名称
    }
  }
}

Configure the packaging script

In package.json, add the corresponding packaging script:

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

Open the terminal in the my-electron directory and run npm run dev to enter the development mode.

About Electron Mirrors for Each Platform

In the case of a network, the speed is still very fast since we set up the NPM mirror and Electron source.

But my side is packaged on the intranet and cannot be connected to the Internet, so I need to take a trick and download the Electron source of the corresponding platform and put it in the respective NPM cache before the package starts.

When electron-builder is packaged, it will go to the respective NPM cache directory to find the corresponding version of Electron source according to the difference of the system. When we put the downloaded source in the NPM cache, there is no need to go to the Internet to pull it .

The download address of the electron@14.2.6 image I use is: https://registry.npmmirror.com/binary.html?path=electron/14.2.6/ .

Here is an example of getting the electron image cache from @electron/get :

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

The corresponding NPM cache paths for each operating system are:

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

Note: The electron images corresponding to Linux x64 and Linux arm64 are different,

The problem of not starting the development mode

The development mode may not start, the reason may be that the electron under my-electron、node_modules has not been installed, and the Electron source is missing.

To fix it, just execute the following command:

node ./node_modules/electron/cli.js

After waiting for the electron image to be pulled, you can enter the start mode normally.

Summarize

The above is a record of using electron-builder to package a full-platform desktop application without networking.

~

~ This article is over, thanks for reading!

~

Learn interesting knowledge, meet interesting friends, and shape interesting souls!

Hello everyone, I am King , the author of 〖 Programming Samadhi 〗, my public number is " Programming Samadhi ", welcome to pay attention, I hope you can give me more advice!