Electron 指南 · 2/6

Project Structure

本章目前仅提供英文版。

An Electron app is made of several pieces of code running with different privileges. This chapter shows where the main process, preload script, and renderer live, and what package.json and the Forge configuration control.

Three kinds of code

Piece	Runs in	Has access to	Typical file
Main process	Node.js, one per app	Electron main APIs, all of Node.js	`main.js`
Preload script	Inside the renderer, before the page loads	A limited set such as `contextBridge` and `ipcRenderer`	`preload.js`
Renderer	A Chromium web page, one per window	Web platform APIs plus whatever the preload exposes	`index.html`, `renderer.js`

The main process manages the app lifecycle and windows and talks to the operating system. A renderer behaves like a browser tab with no Node.js access by default. The preload script bridges the two and exposes only what the page needs.

Layout of a hand-built project

Adding a preload and a renderer script to the previous chapter's project gives this layout:

my-electron-app/
├── package.json     # name, version, main, scripts, dependencies
├── main.js          # main process
├── preload.js       # preload script
├── index.html       # renderer page
├── renderer.js      # script that runs in the renderer
└── node_modules/

The preload script is attached when a window is created, through webPreferences.preload, as an absolute path. Build the path from __dirname so it still resolves after packaging.

const { app, BrowserWindow } = require('electron')
const path = require('node:path')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

The preload uses contextBridge to attach a single object to the renderer's window, and the page uses only that object.

// preload.js
const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('versions', {
  node: () => process.versions.node,
  chrome: () => process.versions.chrome,
  electron: () => process.versions.electron,
})

// renderer.js, loaded from index.html with <script src="./renderer.js"></script>
const info = document.getElementById('info')
info.innerText = `Chrome ${versions.chrome()}, Node.js ${versions.node()}, Electron ${versions.electron()}`

对本章有疑问？

Project Structure

Three kinds of code

Layout of a hand-built project

Layout of an Electron Forge template

package.json and forge.config

Conventions

Summary

0 条评论