仓库结构为什么就等于定制能力

一句话总结npx @backstage/create-app这个制作的不是Backstage的副本，而是大家拥有的单一版本。定制不是打开设置的一行，而是修改和构建存储库的代码并发布，所以知道哪里有什么，就是定制能力。

##为什么需要这个

引入门户网站的团队第一次遇到的问题通常是这样的。

-我想在服务页面上显示电话咨询信息，应该修改哪个文件？

• 要添加内部专用功能，应该在哪里制作新的软件包？

• 插入了一个插件，但屏幕上什么都没有显示出来。遗漏了什么？

-怎么升级？我修的没覆盖吗？

这些问题有共同点。**只要知道所有存储库结构，就会得到答案，不知道的话就不会得到答案。**因为Backstage不是“打开和关闭的设置产品”，所以没有在屏幕上找到的答案。

怎么操作

存储库是一个工作空间

create-app 创建的树是一个使用yarn工作空间的单一版本控制系统。text package.json 루트. private: true, workspaces 에 packages/* 와 plugins/* packages/app/ 프런트엔드 애플리케이션 (React) packages/backend/ 백엔드 애플리케이션 (Node.js) plugins/<이름>/ 사내에서 만든 플러그인 app-config.yaml 설정 路特 private: true之所以这样做，是因为不分发这个软件包本身。而且workspaces在plugins/*必须输入才能在npm注册表中上传内部插件，即使没有@internal/plugin-oncall可以用相同的名称从应用程序中导入使用。

package.json 的backstage.role这是钥匙

每个包裹的package.json里面有backstage.role有这个。backstage-cli看到这个值后，决定如何构建和测试那个软件包。

| role | 什么 |

| --- | --- |

|frontend|packages/app唯一的前端应用程序 |

|backend|packages/backend唯一的白端应用程序 |

|frontend-plugin| 在浏览器中运行的插件 |

|backend-plugin| 在服务器上运行的插件 |

|common-library·node-library·web-library|不是插件的公共代码 |

如果把角色写错的话，可以构建，但输出结果会变得奇怪。后端软件包的main这个构建的产出物（dist/...)应该指的是同样的理由。

新后端系统只注册packages/backend/src/index.ts是后端的一切。```ts

const backend = createBackend(); backend.add(import('@backstage/plugin-catalog-backend')); backend.add(import('@backstage/plugin-catalog-backend-module-github')); backend.start();

- **插件** 提供一个完整的功能。比如目录、文件夹、TechDocs。

- **模块**是插入已经存在的插件的扩展点的碎片。`plugin-catalog-backend-module-github`将目录插件插入GitHub Discovery。

在名字上`-module-`如果包含这个，它不能单独运行，必须同时注册成对的插件。

### 前端插件从三个文件开始```text
src/routes.ts   createRouteRef 로 라우트 참조를 만들어 내보낸다
src/plugin.ts   createPlugin 으로 플러그인을 만들고, 페이지를 확장으로 제공한다
src/index.ts    바깥에 공개할 것만 다시 내보낸다
```为什么一定要把路由参考放在单独的文件里是有原因的。如果页面组件引用插件，而插件又引用组件，就会出现循环导入。如果把只包含参考的文件放在单独的文件里，就会断开那个环。

还有拥有路由的页面是`createRoutableExtension`制作成`mountPoint`设置为路径引用。因为将组件转为延迟导入，所以在实际打开那个插件之前，代码不会下载下来。`index.ts`将其作为万公开的入口点也是纪律。如果应用程序开始直接从插件内部文件中获取内容，那么插件内部结构将无法再被更改。

要在实体页面上附加标签，请修改两个地方。```tsx
<EntitySwitch>
  <EntitySwitch.Case if={isKind('component')}>
    <EntityLayout>
      <EntityLayout.Route path="/oncall" title="On-call">
        <OncallPage />
      </EntityLayout.Route>

EntitySwitch哇isKind根据kind显示不同的页面，EntityLayout.Route按标签。常见的错误在这里产生。**只按标签App.tsx如果未注册的路由，则会显示标签，但点击后会显示空白画面。**画面上没有错误，所以很难找到原因。

开发工作流程yarn install --immutable意思是不会修复锁定文件。在CI中移除这个标志，依赖性会悄悄上升，昨天通过的提交会今天以不同的方式构建。接下来是类型检查、构建、测试的顺序。这个顺序很重要，因为一个类型错误会掩盖所有其他输出。

在现场相遇的样子

这个存储库也有同样的边界。logos.js，i18n.js，backend/app/grader_paths.py是生成物，用手修的话下次生成时就会消失。需要修的是生成器那一边。Backstage应用程序也有完全相同的性格界限。packages/app/src是我的代码node_modules里面的插件是别人的代码。模糊界限，直接开始修改别人的代码的话，就无法升级了。

还有一个。在这个存储库里，有好几次多人并行修复的时候，因为一个类型脚本语法错误，检查器就完全没有看到剩下的内容就结束了。“检查器找不到任何东西”实际上是“什么都没检查”。门户存储库规模越大也会发生同样的事情。CI在构建类型检查之前先设置的原因就是这个。

##下次实习要做的事情/root/cba-app/直接创建create-app将要生成的存储结构。创建工作空间根、两个应用程序、两个内部插件，并为每个软件包分配角色。然后以新的后端系统方式注册插件和模块，编写三个前端插件的文件，然后进入实体页面。最后提取软件包库存并创建CI门禁。因为是无法接受节点依赖的环境，所以不进行构建，只处理结构和布线。