Posts in current category

Introduction to the Electron tutorial


May 25, 2021 08:00 Electron


Table of contents


All Node .js's build-in modules are available in Electron, and all node's third-party components are safe to use (including their own modules).

Electron also provides additional built-in components to develop traditional desktop applications. Some components can only be used in the main process, some only in the rendering process, but some can be used in both processes.

Basic rule: The GUI module or the underlying module of the system can only be used in the main process. To use these modules, you should be familiar with the concept of the main process vs render process script.

The main process script looks like a normal nodejs script

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

var window = null;

app.on('ready', function() {
  window = new BrowserWindow({width: 800, height: 600});
  window.loadURL('https://www.w3cschool.cn');
});

The rendering process is the same as the traditional web interface, except that it has the ability to use node modules:

<!DOCTYPE html>
<html>
<body>
<script>
  const remote = require('electron').remote;
  console.log(remote.app.getVersion());
</script>
</body>
</html>

If you want to run the app, Run your app

Deconstruct the task

If you're using CoffeeScript or Babel, you can use the destructuring assignment to make it easier to use the built-in modules:

const {app, BrowserWindow} = require('electron');

However, if you're using regular JavaScript, you'll have to wait until Chrome supports ES6.

Disable the old style when using the built-in module

Prior to version v0.35.0, all built-in modules needed to be used as require('module-name') we still supported it friendlyly in older applications.

To fully the old style, you can set the ELECTRON_HIDE_INTERNAL_MODULES :

process.env.ELECTRON_HIDE_INTERNAL_MODULES = 'true'

Or call hideInternalModules API:

require('electron').hideInternalModules()