BetterDiscord构建流程全解析：从TypeScript到Electron应用打包

你是否曾好奇BetterDiscord这款增强Discord功能的工具是如何从代码变成可安装应用的？本文将带你深入了解从TypeScript源代码到Electron应用打包的完整构建流程，无需复杂的专业知识，只需跟随步骤一步步探索。读完本文后，你将能够：理解项目的技术架构、掌握构建命令的使用、了解打包和注入的原理，以及排查常见的构建问题。## 项目架构概览BetterDiscord采用现代...

卓丹游Kingsley

286人浏览 · 2025-10-27 00:48:18

卓丹游Kingsley · 2025-10-27 00:48:18 发布

BetterDiscord构建流程全解析：从TypeScript到Electron应用打包

【免费下载链接】BetterDiscord Better Discord enhances Discord desktop app with new features. 项目地址: https://gitcode.com/gh_mirrors/be/BetterDiscord

项目架构概览

BetterDiscord采用现代化的前端技术栈，主要基于TypeScript和Electron构建。项目结构清晰，主要分为以下几个核心部分：

源代码目录：src/包含了所有的TypeScript源代码，分为betterdiscord、common、editor和electron四个主要子目录
脚本目录：scripts/包含构建、打包和注入相关的脚本
样式目录：src/betterdiscord/styles/存放应用的CSS样式文件
配置文件：如package.json和tsconfig.json控制构建流程和编译选项

下面是项目的主要模块关系图：

mermaid

环境准备与依赖安装

在开始构建之前，需要确保开发环境满足以下要求：

Node.js环境（推荐v16+）
Bun包管理器（项目中使用bun作为主要构建工具）
Git版本控制工具

项目的依赖管理通过package.json文件进行，主要分为开发依赖和生产依赖。开发依赖包括TypeScript编译器、Electron框架、ESLint等构建和开发工具，生产依赖则包括应用运行时所需的库。

要安装所有依赖，只需在项目根目录下运行：

bun install

TypeScript编译配置

BetterDiscord使用TypeScript作为主要开发语言，tsconfig.json文件定义了TypeScript编译器的行为。关键配置项包括：

目标环境：设置为ESNext，支持最新的JavaScript特性
模块系统：使用ESNext模块系统，配合模块解析策略为bundler
严格模式：启用strict:true，确保代码质量和类型安全
路径别名：通过paths配置项定义了如@assets、@common等别名，简化模块导入

编译过程中，TypeScript代码会被转换为JavaScript，并通过ESBuild进行打包优化。编译命令定义在package.json的scripts部分：

"scripts": {
  "build": "bun scripts/build.ts",
  "watch": "bun scripts/build.ts --watch",
  "build:production": "NODE_ENV=production bun run build --minify"
}

其中，build:production命令会生成经过压缩优化的生产版本代码。

构建流程详解

BetterDiscord的构建流程主要通过一系列脚本控制，位于scripts/目录下。整个流程可以分为以下几个关键步骤：

1. 代码编译

scripts/build.ts是构建流程的入口点，负责协调各个模块的编译过程。它会：

处理TypeScript源代码的编译
打包CSS样式文件
生成Electron主进程和渲染进程代码
处理静态资源

2. 打包为ASAR文件

编译完成后，scripts/pack.ts负责将编译后的文件打包为Electron支持的ASAR格式：

const makeBundle = function () {
  console.log("Generating bundle");
  asar.createPackageFromFiles(dist, bundleFile, [
    "dist/main.js",
    "dist/package.json",
    "dist/preload.js",
    "dist/betterdiscord.js",
    "dist/editor/preload.js",
    "dist/editor/script.js",
    "dist/editor/index.html"
  ]).then(() => {
    console.log(`✅ Successfully created bundle ${bundleFile}`);
  }).catch(err => {
    console.log(`❌ Could not build bundle: ${err.message}`);
  });
};

ASAR文件是一种将多个文件打包成单个归档文件的格式，可以提高应用加载速度并简化分发流程。

3. 注入到Discord应用

构建完成的ASAR文件需要注入到Discord应用中才能生效。scripts/inject.ts脚本负责这一过程：

const indexJs = path.join(discordPath, "index.js");
if (fs.existsSync(indexJs)) fs.unlinkSync(indexJs);
fs.writeFileSync(indexJs, `require("${bdPath.replace(/\\/g, "\\\\").replace(/"/g, "\\\"")}");\nmodule.exports = require("./core.asar");`);

该脚本会找到本地安装的Discord应用目录，修改其入口文件，使其加载BetterDiscord的代码。

Electron应用架构

BetterDiscord基于Electron框架构建，这是一个允许使用Web技术构建桌面应用的框架。项目的Electron相关代码位于src/electron/目录下，分为主进程和预加载脚本两部分。

主进程代码

src/electron/main/index.ts是Electron主进程的入口文件，负责：

应用生命周期管理
创建和管理浏览器窗口
处理系统级别的事件和IPC通信

关键代码片段：

// 注册所有IPC事件
ipc.registerEvents();

// 移除内容安全策略限制
CSP.remove();

// 初始化BetterDiscord
const BetterDiscord = require("./modules/betterdiscord").default;
BetterDiscord.disableMediaKeys();
BetterDiscord.ensureDirectories();