Configs2026年4月11日·1 分钟阅读

Electron — Build Cross-Platform Desktop Apps with Web Tech

Electron is a framework for building cross-platform desktop apps with JavaScript, HTML, and CSS. Powers VS Code, Slack, Discord, Notion, Figma, GitHub Desktop, and many other household apps. Chromium + Node.js bundled together.

AI
AI Open Source · Community
快速使用

先拿来用，再决定要不要深挖

这里应该同时让用户和 Agent 知道第一步该复制什么、安装什么、落到哪里。

npm create @quick-start/electron@latest my-app
cd my-app
npm install
npm run dev

Minimal main process:

// main.js
const { app, BrowserWindow } = require("electron");

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: { preload: __dirname + "/preload.js" },
  });
  win.loadURL("http://localhost:5173");
}

app.whenReady().then(createWindow);
app.on("window-all-closed", () => app.quit());
介绍

Electron is a framework built by GitHub (now maintained by the OpenJS Foundation) for creating native desktop applications with web technologies. Bundles Chromium and Node.js into a single runtime, letting you ship a single codebase to Windows, macOS, and Linux.

What Electron Does

  • Main process — Node.js environment, OS APIs (filesystem, network, child processes)
  • Renderer process — Chromium window, your web app
  • IPC — bridge between main and renderer via ipcMain/ipcRenderer
  • Native menus — Menu, MenuItem, Tray, dock icon
  • Auto-updater — Squirrel-based updates
  • Notifications — native OS notifications
  • Power/clipboard/crash reporting — OS-level primitives
  • Packaging — electron-builder / electron-forge

Architecture

One main process launches one or more BrowserWindows (renderers). Chromium renders HTML; Node.js runs in main (and optionally renderer via contextIsolation). IPC messages cross the boundary. Security rule: renderer is untrusted, always validate inputs.

Self-Hosting

Package locally then distribute:

npm run build
npx electron-builder --mac --win --linux

Distribute binaries via your site or auto-update server (like Nucleus, Hazel, or GitHub Releases).

Key Features

  • Cross-platform (Win/Mac/Linux)
  • Full Node.js in main process
  • Native menus, tray, notifications
  • Auto-updater
  • Code signing support
  • Crash reporter
  • DevTools extensions
  • MAS (Mac App Store) signing
  • v28+ drops Node 18, uses ESM

Comparison

Framework Binary Size Runtime Language Memory
Electron ~150MB Chromium + Node JS ~200MB idle
Tauri ~3-10MB OS WebView + Rust Rust + JS ~80MB idle
Neutralino ~2MB OS WebView JS (no Node) ~50MB
NW.js ~150MB Chromium + Node JS ~200MB
Wails ~8MB OS WebView + Go Go + JS ~80MB

常见问题 FAQ

Q: 包体积为什么这么大？ A: Chromium (~100MB) + Node.js (~30MB) 都打进每个应用。这是跨平台一致性的代价。

Q: 安全问题？ A: 启用 contextIsolation、关闭 nodeIntegration、用 preload 暴露受限 API。禁止执行远程代码。

Q: 何时选 Tauri？ A: 追求小体积+性能+Rust 生态时选 Tauri；需要完整 Node 生态或 Chromium 精确一致性时选 Electron。

来源与致谢 Sources

讨论

登录后参与讨论。
还没有评论，来写第一条吧。

相关资产

Immer — Immutable State with Mutable Syntax

Immer lets you create the next immutable state by mutating the current one. Write mutating code as if it were normal JS and Immer produces a new immutable object via structural sharing. Built into Redux Toolkit and Zustand.

AI Open Source

date-fns — Modern Modular JavaScript Date Utility Library

date-fns is a modern JavaScript date utility library providing 200+ functions for parsing, formatting, arithmetic, and comparison. Tree-shakeable, immutable, TypeScript-first, and the modern alternative to Moment.js.

AI Open Source

Apollo Client — Industry-Leading GraphQL Client for TS/JS

Apollo Client is the industry-leading GraphQL client for TypeScript, JavaScript, React, Vue, Angular, and more. Powerful caching with normalized store, intuitive APIs, optimistic UI, subscriptions, and comprehensive developer tools.

AI Open Source
◈首页🔍搜索👤我的