electron-builder 解析：你了解其背后的构建原理吗？

最新推荐文章于 2025-10-05 22:44:03 发布

原创

最新推荐文章于 2025-10-05 22:44:03 发布 · 1.7k 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#electron #javascript #前端

本文首发同名微信公众号：前端徐徐

大家好，我是徐徐。今天我们讲讲 electron-builder 的原理。

前言

我们前面浅析了 Electron 的相关原理，这一节我们来讲讲 electron-builder 的原理。为什么要讲它呢，因为它的原理基本上包含了业界跨端的桌面端开发框架的打包构建原理，搞懂了这款工具的原理，其他的类似的跨端开发框架的构建思路都差不多，比如 NW.js 之类的，都差不多。而且它在构建 electron 应用这一块是非常成熟和优秀的，如果你想无痛构建 electron 应用，它是首选。下面我们就来看看它的整体原理与构建流程。

原理概览

electron-builder 是一个专注于将 Electron 应用与前端项目整合的打包工具，它负责管理依赖、生成配置文件、打包资源，并支持多平台构建。首先，在开始构建应用之前，需要确保前端项目经过构建，生成正确的输出文件和 package.json。只有这样，electron-builder才会进行后面的操作，比如收集配置信息并处理依赖，特别是原生模块的编译。然后，通过生成 ASAR 包、创建安装和卸载程序，最终输出完整的安装包。下面是每一部分的详细讲解。

前端项目构建

electron-builder 是不会构建你的前端项目的，它只负责你的前端项目和 electron 的整合，所以你需要自己完成以下步骤：

使用现代前端框架（如React, Vue, Angular）开发应用
配置webpack, Rollup或Vite进行打包
优化构建过程，如代码分割、懒加载、Tree Shaking等
输出构建结果到指定目录，通常是 dist 或 build
确保所有静态资源（图片、字体等）都被正确处理和复制

上面这些步骤跟你打包一个普通的前端应用差别不是太大，但是还是有一些细微的差别，比如：

渲染进程和主进程的代码分离
依赖管理需要正确，可能需要处理特定的原生模块依赖
网络请求需要设置绝对路径，去除 nginx 的配置

上面的步骤做好了，才会真正的走到 electron 的构建世界。

准备package.json

这里可能大家会有疑问，为什么会需要准备 package.json 呢，项目里面肯定有 package.json，这里说的 package.json 可不是项目里面的 package.json ，而是 electron-builder 打包需要的 package.json，你可以理解为现在需要创建一个项目，这个项目专门是为了打包 electron 应用而构建的项目，项目里面需要前端构建的文件和一个 package.json，然后用这个项目打包。大概是如下情形：

主项目package.json：

{
   
   
  "name": "your-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
   
   
    "build": "vite build && electron-builder"
  },
  "devDependencies": {
   
   
    "electron": "^13.0.0",
    "electron-builder": "^22.11.7",
    "vite": "^2.5.0"
  }
}

输出目录的 dist package.json：

{
   
   
  "name": "your-app",
  "version": "1.0.0",
  "main": "main.js",
  "dependencies": {
   
   
    "sqlite3": "^5.0.2"  // 仅包含原生模块
  }
}

当然，我们在实际开发的过程中肯定是不会单独搞两个项目的，打包构建前端项目和构建 electron 应用都是在一个项目中完成的，上面提到的只是为了让大家理解 electron-builder 如何开始工作的，以及 package.json 对它的重要性。这个地方会有相应的解释：https://www.electron.build/tutorials/two-package-structure

收集配置信息

要打包成自己想要的应用，肯定需要一些配置信息，有了这些配置信息 electron-builder 才会正常的运行并获取相应的配置去构建应用。

它支持多种方式的配置信息:

第一种是从 package.json 的 “build” 字段读取配置：

"build": {
   
   
  "appId": "com.example.app",
  "productName": "Your App",
  "mac": {
   
   
    "category": "public.app-category.productivity"
  },
  "win": {
   
   
    "target": ["nsis", "portable"]
  },
  "linux": {
   
   
    "target": ["AppImage", "deb"]
  },
  "extraResources": [
    {
   
   "from": "assets/", "to": "assets/"}
  ]
}

或从electron-builder.yml 或者 electron-builder.json 读取配置

当 electron-builder 读取到用户的配置之后，它会合并默认配置和用户配置，最后组成一个完整的打包配置信息。

源码路径在这里：

https://github1s.com/electron-userland/electron-builder/blob/master/packages/app-builder-lib/src/util/config/config.ts

export async function getConfig(
  projectDir: string,
  configPath: string | null,
  configFromOptions: Configuration | null | undefined,
  packageMetadata: Lazy<{
   
    [key: string]: any } | null><