本文档为希望为 Tabby 贡献代码、了解其架构、设置开发环境或创建插件的开发人员提供了技术信息。有关最终用户如何使用 Tabby 的信息，请参阅概述。
本指南适用于希望以下列目的的开发人员：
有关 Tabby 的安装和使用信息，请参阅入门。有关构建和部署的详细信息，请参阅构建与部署。
Tabby 基于 Angular 和 Electron 构建，采用插件化架构，支持模块化开发。应用程序围绕几个核心系统构建，这些系统通过 Angular 的依赖注入系统进行通信。
下图展示了 Tabby 的主要组件及其关系
来源
Tabby 采用插件化架构，通过模块化插件提供功能
来源
开发工作流程利用了 package.json 中定义的 npm 脚本
| 脚本 | 描述 |
|---|---|
| build | 构建所有模块 |
| build:typings | 构建 TypeScript 类型定义 |
| watch | 构建并监视更改 |
| start | 在开发模式下启动应用程序 |
| lint | 运行 ESLint 检查代码风格 |
来源
代码库组织成多个包，每个包处理功能的一个特定方面
| 包 | 目的 |
|---|---|
| tabby-core | 核心应用程序基础设施和服务 |
| tabby-settings | 设置 UI 和配置管理 |
| tabby-terminal | 终端仿真和接口 |
| tabby-local | 本地终端实现 |
| tabby-ssh | SSH 客户端实现 |
| tabby-serial | 串口终端实现 |
| tabby-telnet | Telnet 客户端实现 |
| tabby-electron | Electron 特定平台代码 |
| tabby-web | Web 平台实现 |
每个包遵循类似的结构
tabby-*/
├── src/
│ ├── index.ts # Main entry point and module definition
│ ├── api.ts # Public API definitions
│ ├── components/ # Angular components
│ ├── services/ # Angular services
│ └── config.ts # Configuration schema
├── package.json # Package metadata
└── webpack.config.js # Build configuration
来源
插件扩展了 Tabby 的功能。本节说明如何开发自定义插件。
一个基本插件需要以下结构
tabby-myplugin/
├── src/
│ ├── index.ts # Main entry point with NgModule definition
│ ├── components/ # Angular components
│ │ └── my-component.component.ts
│ └── services/ # Angular services
│ └── my-service.service.ts
├── package.json # Plugin metadata
└── webpack.config.js # Build configuration
Tabby 提供了几个插件可以实现的扩展点
| 扩展点 | 接口 | 目的 |
|---|---|---|
| SettingsTabProvider | tabby-settings | 向设置窗口添加选项卡 |
| TerminalDecorator | tabby-terminal | 修改终端行为 |
| ToolbarButtonProvider | tabby-core | 向工具栏添加按钮 |
| TabRecoveryProvider | tabby-core | 支持标签页恢复 |
| ProfileProvider | tabby-core | 添加连接配置文件类型 |
| ConfigProvider | tabby-core | 提供额外配置 |
| HotkeyProvider | tabby-core | 添加热键定义 |
来源
以下插件可作为示例进行研究
来源
来源
yarn lint 以确保代码质量来源
使用 Chrome DevTools 调试渲染器进程
用于主进程调试
yarn start:prod --debug 启动 Tabby有用的环境变量
TABBY_DEV=1 - 启用开发模式TABBY_PLUGINS=/path/to/plugins - 从指定目录加载插件来源
来源