Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you the relevant knowledge points about how to use electron development and construction tools. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Preface

Thanks to Vite's excellent front-end development experience, more and more Electron projects begin to use it to build development. Looking through various community resources, you can find many Electron development templates based on Vite, but there are some common problems:

Configuration is relatively complex and tedious (configure main,preload and renderer respectively)

Need auxiliary script to cooperate with compilation and development

There is no way to choose the front-end framework independently (vue,react,svelte, … )

Faced with these problems, we need to have an understanding of Electron. Electron is a desktop application framework based on Chromium and Node.js, which means that compiling and building tools need to deal with code in both node.js and browser environments. This is the main reason for the complexity of Electron development and build work.

Knowledge point

Main process and preloaded scripts, which need to be built based on cjs modularization standard and run in node environment

Rendering process, usually integrated with modern front-end frameworks such as vue.js,react, based on iife modular standards, running in browsers

When node integration is enabled in Electron, you can write code based on the cjs modular standard. Although it does not need to be compiled and built, it is not conducive to the use of modern front-end frameworks, and will face serious performance and security problems.

The build is not compiled based on the esm standard. Although node itself supports it, Electron does not support it, which is also a work of subsequent versions of Electron.

What is electron-vite?

Electron-vite is an Electron build tool integrated with Vite. Developers do not need to pay too much attention to configuration, no matter which front-end framework they choose, they can easily complete the construction, and improve the efficiency of Electron development and construction.

Characteristics

⚡️ is used in the same way as Vite

? The main process / rendering process / preload scripts are all built using Vite

? Unify all configurations and merge them into one file

? Build the configuration by default, without paying attention to the configuration

? Support for rendering process hot update (HMR)

Install npm I electron-vite-D development & compilation

In a project where electron-vite is installed, you can run it directly using npx electron-vite, or you can add npm scripts to the package.json file:

{"scripts": {"start": "electron-vite preview", / / start electron app to preview production build "dev": "electron-vite dev", / / start dev server and electron app "prebuild": "electron-vite build" / / build for production}}

In order to use hot updates (HMR), you need to use the environment variable (ELECTRON_RENDERER_URL) to determine whether the Electron window loads local or remote pages.

Function createWindow () {/ / Create the browser window const mainWindow = new BrowserWindow ({width: 800,600, webPreferences: {preload: path.join (_ _ dirname) '.. / preload/index.js')}) / / Load the remote URL for development or the local html file for production if (! app.isPackaged & & process.env [' ELECTRON_RENDERER_URL']) {mainWindow.loadURL (process.env ['ELECTRON_RENDERER_URL'])} else {mainWindow.loadFile (path.join (_ _ dirname,'. / renderer/index.html'))}}

Note: in development, the rendering process index.html file needs to be referenced by a script.

Recommended project directory ├── src | ├── main | | ├── index.js | | └──. | ├── preload | | ├── index.js | | └──. | └── renderer | ├── src | ├── index.html | └──. ├── electron.vite.config.js └── package.json start learning

Clone electron-vite-boilerplate (https://github.com/alex8088/electron-vite-boilerplate) project learning

Build project learning through create-electron scaffolding

Npm init @ quick-start/electron configuration profile

When you run electron-vite from the command line, it automatically attempts to parse the configuration file named electron.vite.config.js in the root directory of the project. The most basic configuration file is as follows:

/ / electron.vite.config.jsexport default {main: {/ / vite config options}, preload: {/ / vite config options}, renderer: {/ / vite config options}}

You can explicitly specify a configuration file (parsed relative to the cwd path) with the-config command line option:

Electron-vite-config my-config.js

Tip: electron-vite also supports ts or mjs configuration files.

Configure Smart Tip

Because electron-vite itself comes with a Typescript type, you can achieve smart tips through the cooperation of IDE and jsdoc:

/ * * @ type {import ('electron-vite') .UserConfig} * / const config = {/ /...} export default config

You can also use the defineConfig and defineViteConfig tool function so that you can get type hints without jsdoc annotations:

Import {defineConfig, defineViteConfig} from 'electron-vite'export default defineConfig ({main: {/ /...}, preload: {/ /...}, renderer: defineViteConfig (({command, mode}) = > {/ / conditional config use defineViteConfig / /...}))

Tip: defineViteConfig is exported from Vite.

The preset configuration is based on the compiled item preset of the main process:

OutDir: out\ main (relative to the root directory)

Target: node*, automatically matches the node build target of Electron, for example, Electron 17 is node16.13

Lib.entry: src\ main {index | main}. {js | ts | mjs | cjs} (relative to the root directory). Empty if not found

Lib.formats: cjs

RollupOptions.external: electron and all built-in node modules (will be merged automatically if the user has configured an external module ID)

Compiled item presets based on preload scripts:

OutDir: out\ preload (relative to the root directory)

Target: same as the main process

Lib.entry: src\ preload {index | preload}. {js | ts | mjs | cjs} (relative to the root directory). Empty if not found

Lib.formats: cjs

RollupOptions.external: same as the main process

Compiled item presets based on the rendering process:

Root: src\ renderer (relative to the root directory)

OutDir: out\ renderer (relative to the root directory)

Target: chrome*, automatically matches the chrome build target of Electron. For example, Electron 17 is chrome98

Lib.entry: src\ renderer\ index.html (relative to the root directory), empty if not found

PolyfillModulePreload: false, no need to polyfillModulePreload for the rendering process

RollupOptions.external: same as the main process

Tip: if you want to use these preset configurations in existing projects, you can use Vite's plug-in vite-plugin-electron-config (github.com/alex8088/vi …)

Configuration question how should Electron be configured if it has multiple windows?

When an Electron application has multiple windows, it means that there may be multiple html pages and preload scripts, and you can modify your configuration file as follows:

Export default {main: {}, preload: {build: {rollupOptions: {browser: resolve (_ _ dirname, 'src/preload/browser.ts'), webview: resolve (_ _ dirname,' src/preload/webview.ts')} Renderer: {build: {rollupOptions: {input: {browser: resolve (_ _ dirname, 'src/renderer/browser.html'), webview: resolve (_ _ dirname,' src/renderer/webview.html')} these are all the contents of the article "how to use electron Development build tools" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.