preface

Electron is gaining popularity because of its ease of use and support for all operating platforms.

Today I’m going to share my experience on how to use one set of code to quickly package and generate installation packages for every major platform.

Project installation

First, using the boost tip I described earlier, set:

  • NPM source is taobao mirror source;
  • The Electron source address is the Electron source address on the Chinese mirroring website.

Then execute the following commands in turn:

Mkdir my-electron CD my-electron NPM init -y NPM install [email protected] -d NPM install @electron/remote --save NPM install electron-builder -DCopy the code

Packaging configuration

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

{
  "name": "my-electron"."version": "0.1.0 from"."author": Programming Samadhi."build": {  / / electron - builder configuration
    "productName":"myFirstApp".// Project name This is also the prefix of the generated EXE file
    "appId": "xxxxx"."copyright":"xxxx".// Copyright information
    "directories": {
        "output": "build" // Output folder
    }, 
    "extraResources":  [{ // Configuration file to read and write
        "from": "./config/config.json"."to": ".. /config/config.json"}]."win": {  
        "icon": "xxx/icon.ico"// Icon path,
        "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.// One-click setup
        "guid": "xxxx".// Registry name, not recommended
        "perMachine": true.// Whether to enable installation permission restrictions (for this computer or the current user)
        "allowElevation": true.// Allow request promotion. If false, the user must restart setup with the promoted permissions.
        "allowToChangeInstallationDirectory": true.// Allows you to change the installation directory
        "installerIcon": "./build/icons/aaa.ico".// Install icon
        "uninstallerIcon": "./build/icons/bbb.ico".// Uninstall the icon
        "installerHeaderIcon": "./build/icons/aaa.ico".// Install header icon
        "createDesktopShortcut": true.// Create a desktop icon
        "createStartMenuShortcut": true.// Create start menu icon
        "shortcutName": "xxxx" // Icon name}}}Copy the code

Configuring 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"}... }Copy the code

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

About the Electron image of each platform

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

However, I can’t connect to the Internet because of Intranet packaging, so I need to download the Electron source of the corresponding platform and put it into their RESPECTIVE NPM cache before packaging begins.

In the process of packaging, the electron Builder will search for the corresponding version of the electron source in their respective NPM cache directory according to the different systems. After we put the downloaded source in the NPM cache, there is no need to go to the network to pull it.

I use [email protected] mirror download address is: https://registry.npmmirror.com/binary.html?path=electron/14.2.6/.

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

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

The NPM cache paths of each OPERATING system are as follows:

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

Note: The corresponding electron image for Linux X64 and Linux ARM64 is different.

The problem with development mode not starting

The development mode may not start because the electron in my-electron and node_modules has not been installed and the electron source is missing.

To resolve this, simply execute the following command:

node ./node_modules/electron/cli.js
Copy the code

Wait for the completion of the electron image to enter the start mode.

conclusion

That’s how you packaged a full-platform desktop application using electron Builder without networking.

~

Thanks for reading!

~

Learn interesting knowledge, meet interesting friends, shape interesting soul!

Hello everyone, I am the author of “programming Samadhi”, I am king Yi, my public account is “programming Samadhi”, welcome to pay attention, I hope you can give me more advice!