2.2 项目初始化方式 - 人人都会AI编程

上手 Electron 的第一步，就是把“能跑起来的空壳项目”搭出来。目前主流有两种方式：使用官方的脚手架工具和纯手动搭建。无论选哪种，最终目标都是得到一个能显示窗口、能热更新、能打包分发的工程骨架。

2.2.1 方式一：使用 Electron Forge（官方推荐）

Electron Forge 是 Electron 官方维护的一体化工具，集项目初始化、开发、打包、发布等功能于一身。如果你不想纠结构建配置，它是目前最省心的选择。

初始化命令：

npm init electron-app@latest my-app -- --template=webpack-typescript

my-app 是项目名称。模板参数可选：webpack、webpack-typescript、vite、vite-typescript 等。如果不指定，默认使用 Webpack + JavaScript。

初始化完成后，项目结构大致如下：

my-app/
├── src/
│   ├── index.html
│   ├── index.ts          # 渲染进程入口
│   ├── preload.ts        # 预加载脚本
│   └── main.ts           # 主进程入口
├── forge.config.ts       # Forge 配置
├── package.json
└── tsconfig.json

常用命令：

npm start        # 启动开发环境（热更新）
npm run make     # 打包当前平台安装包
npm run publish  # 发布到分发渠道

Electron Forge 的优点是开箱即用：Webpack/Vite 的配置已经处理好，主进程和渲染进程都能热更新，打包逻辑也内置了。缺点是定制程度略低，但足以覆盖 80% 的项目需求。

2.2.2 方式二：使用 electron-builder 脚手架

electron-builder 是社区里使用最广泛的打包工具，但它本身不负责项目初始化。通常搭配 electron 和前端构建工具（Vite/Webpack）手动搭建。

社区提供了不少模板仓库，最快捷的方式是直接克隆一个现成的模板：

# 使用 Vite + Vue + TypeScript 模板（推荐）
git clone https://github.com/electron-vite/electron-vite-vue.git my-app
cd my-app
npm install

或者使用 create-electron-app 类似的第三方脚手架。这种方式下，你需要自己配置 electron-builder 的构建配置（在 package.json 或 electron-builder.yml 中），但换来的是更细粒度的控制。

典型目录结构（以 electron-vite 为例）：

my-app/
├── electron/          # 主进程代码
│   ├── main.ts
│   └── preload.ts
├── src/               # 渲染进程代码（就是普通的 Vue/React 项目）
│   ├── App.vue
│   └── main.ts
├── electron-builder.yml
└── package.json

开发时，渲染进程由 Vite 驱动，支持热更新；主进程由 electron-vite 监听文件变化自动重启应用，体验非常流畅。

2.2.3 方式三：纯手动搭建（适合理解原理）

如果你想彻底搞懂 Electron 的运行机制，手动从零搭一遍会很有帮助。步骤如下：

1. 初始化 package.json

mkdir my-app && cd my-app
npm init -y

2. 安装 Electron

npm install electron --save-dev

3. 创建核心文件

main.js：主进程入口
index.html：渲染进程界面
preload.js：预加载脚本（安全桥接）

最小化的 main.js：

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,  // 安全必备
      nodeIntegration: false,  // 禁止渲染进程直接访问 Node
    },
  });
  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

index.html 随便写点内容，preload.js 可以暂时只暴露一个简单的 console.log 函数。

4. 配置启动命令

修改 package.json 的 scripts：

{
  "scripts": {
    "start": "electron ."
  }
}

然后执行 npm start，窗口就会弹出来。

手动方式的局限：没有热更新，每次改完代码要手动重启；没有构建流程，无法直接使用 TypeScript 或 Vue/React；打包也需要额外配置 electron-builder。因此它更多用于学习或极简工具，正式项目建议还是采用前两种方式。

2.2.4 选择建议

快速原型、中小型项目：直接用 Electron Forge，配置少、坑少、更新快。
需要深度定制、已有前端工程：结合 electron-builder 和 Vite/Webpack 从模板开始，灵活性最高。
学习理解、极简工具：手动搭建，透彻理解主进程/渲染进程关系。

无论选哪一种，最终得到的都是一个含有主进程、渲染进程、预加载脚本的工程结构。这是 Electron 应用的最小骨架，后续所有功能都在这个骨架上添砖加瓦。