大家好！今天，我们将深入探索Backstage庞大的monorepo森林，主题是：“如何判断这个包是否是前端插件？” 🕵️♂️
Backstage由无数个包组成，初次接触时很容易迷失方向。但是，只要掌握几个明确的“线索”，您就能在短短5秒内识别出哪个包是负责用户界面的前端插件。现在就揭示这个秘诀！💡
🏗️ 识别前端插件的3步公式
在调查Backstage包时，您只需检查以下3个要素。它们是证明其为前端插件的决定性证据。
1. package.json的名称和依赖项 📦
首先要检查的是包根目录下的package.json文件。
- 命名规则： 大多数官方和社区插件都遵循@backstage/plugin-<名称>的格式。与后端插件不同，它们的名字后面没有-backend。
- 核心依赖项： 如果dependencies列表中包含@backstage/core-plugin-api或@backstage/core-components，那么它有99%的可能是用于构建UI并与Backstage核心API通信的前端包！
2. src/plugin.ts文件的存在 🧩
前端插件使用特定函数将自身注册到Backstage系统中。打开src文件夹中的plugin.ts（或类似名称的文件）。
- createPlugin函数： 检查代码中是否调用了createPlugin函数。此函数定义了插件的身份，并封装了路由（Route）或API等。
TypeScript
// 示例: src/plugin.ts
import { createPlugin } from '@backstage/core-plugin-api';
export const myFrontendPlugin = createPlugin({
id: 'my-plugin',
// ... 插件配置
});3. 扩展（Extensions）的定义 🎨
前端插件必须显示在屏幕上，因此它们定义了将暴露给用户的“组件”。这些被称为扩展（Extensions）。
- createRoutableExtension或createComponentExtension： 如果使用了这些函数，则意味着它提供了将在特定URL路径上显示或嵌入到其他页面中的UI组件。
🔍 从文件夹结构看前端插件的特点
除了形式化的代码，文件夹结构本身也与后端插件截然不同。
| 文件夹/文件 | 作用 | 特点 |
|---|---|---|
| src/components/ | UI组件 | 充满了React(tsx)文件。⚛️ |
| src/api/ | 前端API定义 | 包含与后端通信的接口。 |
| src/routes.ts | 路由引用 | 包含插件内部导航的路径信息。📍 |
| src/index.ts | 外部暴露通道 | 导出供其他包使用的组件和API。 |
—
💡 实战练习：与后端插件有何不同？
为了避免混淆，让我们明确区分与后端插件的不同之处！
- 后端插件： 名称以-backend结尾，有src/service/router.ts，并使用createRouter或add(import(…))形式提供Express路由器。⚙️
- 前端插件： 名称简洁，有src/plugin.ts，并提供React组件。🎨
🏁 结论：识别的核心是createPlugin
在Backstage包中查找前端插件最直接、最确定的方法是检查src文件夹中是否调用了createPlugin函数。因为这是插件集成到Backstage前端应用程序的官方“通行证”。
现在，无论您查看哪个包，都能够清楚地区分它是负责渲染屏幕还是在后台处理数据了！🚀
发表回复