Recently, we are going to do the electron project. After searching on the Internet, we already have the framework of electron+vite. But in order to build the project better, I explored how it works.

electron

Electron is a framework for creating desktop applications using HTML, CSS, JS to create desktop applications. To be exact, however, the electron package only supports online preview, which means that you can preview desktop applications online using only an index.html entry file and main.js as the main process.

However, it does not have the function to package the project into an EXE. If you need to package the project into an EXE, you need to use the packaging tool to package it. In the past, the electric-package package was used for packaging, but due to various problems of the electric-package, the electric-Builder package is used for packaging.

electron-builder

To pack HTML, JS, CSS files into exe files, you need to use the electron Builder package, which can pack HTML, JS, CSS into EXE files.

You can configure the package command “build”: “electric-Builder –win –x64” in script and then configure the build parameter in package.json.

The electron Builder package includes both the Chromium browser kernel and NodeJS, so even if nothing is written, a package is 130MB in size.

vite

Vite is the latest and most popular front-end packaging tool. The first two questions are: 1. Why is Vite so fast? And since Vite is not packaged in the development environment, 2. So why do browsers recognize.vue,.jsx files?

  • 1. Vite is a packaging tool built with Esbuild, and esbuild is written in go language. The construction speed is 10-100 times faster than webPack, which is built with JS, and the time is only 2%~3% of WebPack.

  • 2. Vite takes advantage of the browser’s natural support for import syntax, is natural load on demand, and needs to load dependencies to the browser to handle, that is, the browser to achieve a faster start up effect.

  • 3. Browsers don’t recognize.vue files, so Vite actually precompiles the code at startup into JS, HTML, and CSS files that browsers don’t recognize. Although the process is similar to packaging, Vite is still faster than WebPack due to the above advantages.

How vite works

Vite works by building a Web server out of KOA and hosting the entry index.html file. When a user requests a “/” path, the Web server returns the index.html static file. Since it contains the main.js entry file, the contents of the entry file and the mounted app. vue component are returned. Import vue from ‘vue’ : import vue from ‘vue’ : import vue from ‘vue’ : import vue from ‘vue’ And with the help of the package’s interpreter, the code can be turned into HTML, CSS, and JS files that the browser can recognize.

electron+vite

After knowing how Vite works, we can see that in the electron+ Vite project on Github, we export the vite server from Vite, then create a new server by ourselves, and then make use of vite’s ability to precompile. Convert vUE into HTML, CSS, and JS files that electron can recognize and return to electron for loading.

electron+nodejs

Electron is packed with NodeJS, so it includes the Node environment. Electron is divided into the main process and the Renderer process. In other words, the main process can use the NodeJS module, and the renderer can use the NodeJS module only when nodeIntegration is enabled: True, contextIsolation: false configuration. But since [email protected], Electron has not recommended this practice. Instead, the main and Renderer contexts are isolated and nodeJS modules are not allowed to be used in the renderer. Electron provides another way to call the NodeJS module in the Renderer, although context configuration can also be enabled to call the NodeJS module in the Renderer. Use exposeInMainWorld to expose the NodeJS API to the Renderer so that the renderer can also use NodeJS modules.

Native Addon

A Native Addon in the Nodejs environment is a binary file implemented by a low-level language such as C or C++. We can import Native Addon by requiring () just like any other module

Native Module

Native Addon, like other.js endings, exposes module.exports or exports objects, which are packaged into Node modules and are called Native modules.

node module

The node module.

serialport

From the package directory of serialport, we can see that part of serialport is implemented in C++, so serialport is a standard native module, while in electron, native module cannot be directly used. Therefore, serialport needs to be compiled into a file that can be recognized by ELECTRON using electron rebuild.

Currently, v10.0.0 is recommended

electron-rebuild

In fact, the electron rebuild is compiled using the node-gyp tool.

node-gyp

You need to install Node-gyp globally. Gyp stands for Generate Your Project. Python3. x and visual studio 2017 or 2019 C++ workenvironments are required (2022 is not currently supported). Once installed, you will have the ability to compile C/C++ into Native Addon or dynamic libraries. Only need when using package node – gyp build, can according to the current system to produce can only be used for the current system of bindings. The node file, and then use the require in nodejs import this file, you can use c + + part of the package.

Electron – Viet-Serialport (Native Module)

If you want to use the serialPort (Native Module) in the main process or preload, you can use the serialPort (native Module) in the main process. All we have to do is electron rebuild. However, if you want to use SerialPort (native Module) in the Renderer, you need to expose the methods in The SerialPort (Native Module) to the Renderer via exposeInMainWorld.

Pack to build

Since Vite itself can only handle esModules, all node modules need to be packaged outside of Vite.

However, since the electron Builder feature automatically recognizes the dependencies in package.json and pulls the package from the node_nodule, the packaged file still contains the module.

Reference article:

(5 messages) Use the electron Builder to package the electron project

Quber – CSDN blog

Electron – builder package

Native Addion and Native Module and Node Module

[A simple guide to load C/C++ code into Node.js JavaScript Applications | by Uday Hiwarale | JsPoint | Medium] (medium.com/jspoint/a-s… Native Addon is normally written in C,be loaded into a program dynamically%2C at runtime.)