Electron sharing (getting started, installing, packaging)

Electron

Electron is a framework for building desktop applications using JavaScript, HTML and CSS

Install

Before using Electron for development, you need to install Node.js. You can enter the following command in the terminal to output the version information of Node.js and npm:

node -v
npm -v

insert image description here
If not installed, you can click the installation tutorial here

The next step is to install Electron :
we can install it in two ways

Global installation

npm install electron -g

[Adding g is a global installation, which is automatically added to the environment variable]

You can verify that the installation is successful by entering the following command to pop up a browser-like program:

electron

insert image description here

insert image description here
If you encounter npm installation of Electron is very slow or wrong, you can use Taobao mirror installation:

npm install -g electron --registry=https://registry.npm.taobao.org

Or install cnpm first, then use cnpm to install Electron

If none of the above works, we can only download the electron.zip that suits us
https://registry.npmmirror.com/binary.html?path=electron/

The article downloaded here is electron-v22.0.0-win32-x64.zip

We put the downloaded zip package under the electron folder of our global installation directory:
insert image description here
here we need to modify the install.js file:
comment this block of code

and add a statement

extractFile('electron-v22.0.0-win32-x64.zip');

We can see that the parameter passed by the extractFile method is the path of a zip package. After
insert image description here
modifying the install.js file, our terminal opens the electron directory under the global installation directory, executes the node install.js command, and generates the dist folder:

node install.js

insert image description here

At this step, it means that we have successfully installed Electron globally! ! !

quick start

We can git clone the Electron official quick start application:

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

Enter the project installation dependencies:

cd electron-quick-start
npm install

We can run the project in two ways:

electron .

npm start

npm start actually runs electron.command
insert image description here

Seeing this means it has run successfully! ! !

Pack

Note: Electron cannot be packaged across platforms, it can only package applications of the current platform on the current platform, and the Windows system can only package Windows packages

Packaged in two ways:

electron-packager (simple operation, packaged into a running directory)

Use electron-packager to package features:

The operation is simple. The packaged directory is the running directory of the program, which is equivalent to having been installed and can only be run after installation. If you need to package it into an installer, you need to use electron-builder to package it

Install electron-packager:

npm install electron-packager --save-dev
npm install electron-packager -g

Quick package command:

electron-packager .

Packaging command configuration:

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --out=out --icon=assets/app.ico --asar --overwrite --ignore=.git

sourcedir: the path where the project source file is located (the only required parameter)
appname: the project name (it is more convenient to directly use the name attribute in the package.json file)
platform: which platform application to build (Windows, Mac or Linux)
arch: build architecture Contains ia32, x64, armv7l, arm64
out: packaged address
icon: package icon
asar: whether to generate app.asar, otherwise it is your own source code
overwrite: overwrite the last package
ignore: do not package the file

electron-builder (relatively complex, packaged into an installer)

Use electron-builder to package features:

The operation is relatively complicated, it can be packaged into an installer, and the packaging method can be customized. It can be said that electron-builder is more advanced than electron-packager

Install yarn (electron-builder package depends on yarn):

npm install -g yarn

Install electron-builder:

npm install -g electron-builder

Configure the script node of the package.js file:

  "scripts": {
    
    
    "start": "electron .",
    "pack": "electron-builder --dir",
    "postinstall": "electron-builder install-app-deps",
    "dist": "electron-builder",
    "dist-win": "electron-builder --win --ia32",
    "dist-win64": "electron-builder --win --x64",
    "dist-mac": "electron-builder --mac",
    "dist-linux": "electron-builder --linux"
  }

Run the compile and package command:

compile

yarn postinstall

Package windows 64-bit application commands

yarn dist-win64

insert image description here
The .exe in the figure can be run directly

insert image description here
After running, the file of the application is placed:

So far, the package has been successfully packaged! ! !