设置开发环境

开发技术栈概览

Tabby 使用以下技术构建

Electron：跨平台桌面应用框架
TypeScript：JavaScript 扩展编程语言
Angular：用于构建 UI 的前端框架
Webpack：JavaScript 应用程序的模块打包工具
Node.js：JavaScript 运行时环境

应用程序被结构化为一组模块，这些模块在构建时组合在一起。插件架构允许在不修改核心代码库的情况下扩展功能。

开发环境设置流程

来源：package.json102-114

先决条件

在设置开发环境之前，请确保已安装以下软件

Node.js（推荐最新 LTS 版本）
npm（随 Node.js 一起提供）或 yarn（推荐）
Git 用于版本控制

特定平台的先决条件

平台	其他要求
Windows	带 C++ 支持的 Visual Studio Build Tools
macOS	Xcode Command Line Tools
Linux	build-essential, python3, gcc

来源：package.json1-101

获取源代码

从 GitHub 克隆 Tabby 仓库

项目结构

Tabby 的代码库由几个关键组件组成

来源：README.md32-48 package.json1-121

安装依赖项

使用 yarn（推荐）或 npm 安装项目依赖项

或

这将：

安装 package.json 中列出的所有必要依赖项
运行 postinstall 脚本，该脚本用于构建原生模块
设置必要的构建工具

注意：由于依赖项数量和原生模块编译，安装过程可能需要几分钟。

来源：package.json111 app/package.json12-16

构建项目

安装依赖项后，构建项目

或

此命令运行两个步骤

build:typings：生成 TypeScript 定义文件
node scripts/build-modules.mjs：使用 Webpack 构建所有模块

来源：package.json102-103

在开发模式下运行

要在开发模式下运行 Tabby，您需要

启动 Webpack 观察器以实时编译更改
或
在另一个终端中，启动 Electron 应用程序
或

这将以开发配置启动 Tabby，启用热重载和调试。

来源：package.json105-107

开发工作流

标准开发工作流程包括

修改 TypeScript 源文件
Webpack 自动检测并编译这些更改
如有必要，重启 Electron 应用程序（UI 更改时自动重启）
测试您的更改

来源：package.json105-108

调试

Tabby 支持多种调试方法

Electron 主进程调试

当使用 yarn start 或 npm run start 运行时，Electron 主进程将带 --inspect 标志运行，允许您将调试器连接到端口 9229。

您可以通过在 Chrome 浏览器中打开 chrome://inspect 并选择 Tabby 进程来使用 Chrome DevTools 进行调试。

渲染器进程调试

要调试渲染器进程（UI）

在 Tabby 窗口中任意位置右键单击并选择“检查元素”
这将为渲染器进程打开 Chrome DevTools
使用控制台、元素和源代码面板进行调试

来源：package.json106

插件开发

有关 Tabby 插件开发的信息，请参阅插件开发页面。

构建以供分发

要构建 Tabby 的生产版本

运行生产构建
使用 Electron Builder 打包应用程序以进行分发
```
electron-builder
```

此过程会在 dist 目录中创建特定于平台的包。

来源：package.json102-114

架构概述

理解 Tabby 的架构有助于开发。以下是组件如何交互的简化视图

来源：README.md34-43

常见问题与解决方案

问题	解决方案
原生模块构建失败	确保您已为您的平台安装了适当的构建工具
TypeScript 错误	检查与项目 TypeScript 版本的兼容性（4.9.x）
Angular 依赖问题	确保您使用的是正确版本的 Angular 组件（约 15.2.x）
缺少依赖项	运行 `yarn` 或 `npm install` 更新依赖项

来源：package.json3-93 app/package.json18-65

贡献指南

在提交贡献之前，请确保

您的代码遵循项目的编码风格
所有测试均通过
您已记录所有新功能或更改
您的分支与主仓库保持最新

有关更详细的贡献信息，请参阅贡献指南页面。