# @frontside/backstage-plugin-scaffolder-workflow 中文文档

规范地址：https://npmcn.com/package/%40frontside/backstage-plugin-scaffolder-workflow/

版本：0\.10\.2
npm 元数据更新时间：2026-09-30T21:07:05.086Z
中文译文更新时间：2026-11-15T16:10:30.417Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40frontside/backstage-plugin-scaffolder-workflow
原文对照：https://npmcn.com/package/%40frontside/backstage-plugin-scaffolder-workflow/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：112 kB，39 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：21 个
- peer 依赖：react ^16\.13\.1 \|\| ^17\.0\.0，react-router-dom ^6\.x\.x
- 首次发布：2023-02-02T18:25:47.027Z
- 最新版本发布：2024-08-14T15:36:05.333Z
- 近 30 天下载量：2411（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：31（近 12 个月 0 个）

## 中文简介

脚手架工作流程是 [后台](https://backstage.io/) 这会减轻写锅炉板 几乎任何情况的痛苦.

## 安装

```sh
npm install @frontside/backstage-plugin-scaffolder-workflow
```

也可以使用：`pnpm add @frontside/backstage-plugin-scaffolder-workflow`、`yarn add @frontside/backstage-plugin-scaffolder-workflow`、`bun add @frontside/backstage-plugin-scaffolder-workflow`

## README

# @ 前方/ 后台- 插脚- 工作流程

## 为什么?

脚手架工作流程是 [后台](https://backstage.io/) 这会减轻写锅炉板 几乎任何情况的痛苦.

运行脚手架工作流程 在他们现在的后台位置之外是不可能的, 我们希望运行脚手架工作流程 在任何反应组件 在后台实例.

这种回放提供了做这种事情的构件和使脚手架工作流程在不同情景下运行的组件.

## 开始

```sh
# npm
npm install @backstage/plugin-scaffolder-react

# yarn
yarn add @backstage/plugin-scaffolder-react

#pnpm
pnpm add @backstage/plugin-scaffolder-react
```

## 钩子

[使用 RunWork 流程](https://npmcn.com/package/%40frontside/backstage-plugin-scaffolder-workflow/hooks/useRunWorkflow.ts) - 踢出脚手架的工作流程, 它返回一个 `taskStream` 工作流程活动

```ts
const templateRef = stringifyEntityRef({
  kind: 'Template',
  namespace: 'default',
  name: 'update-system',
});

const { taskStatus, execute, taskStream } = useRunWorkflow({
  templateRef,
  onComplete,
  onError,
});
```

[使用Stepper 软件](https://npmcn.com/package/%40frontside/backstage-plugin-scaffolder-workflow/hooks/useStepper) - 跟踪组件实例之外的工作流程步骤:

```ts
  const templateRef = stringifyEntityRef({
    kind: 'Template',
    namespace: 'default',
    name: 'update-system',
  });

  const { loading, manifest } = useTemplateParameterSchema(templateRef);

const { currentStep } = useStepper({ manifest });
```

## 构成部分

[模块工作流程](https://npmcn.com/package/%40frontside/backstage-plugin-scaffolder-workflow/src/components/ModalWorkflow/ModalWorkflow.tsx) - 点击链接并按方式运行工作流程表,从而摆脱脚手架工作流程:

[演示](https://npmcn.com/package/docs/modal.mp4)

```ts
<>
  {entity?.spec?.system ? entity.spec.system : 'System not specified.'}
  <Tooltip title="Assign System">
    <IconButton aria-label="Assign System" color="primary" onClick={() => setOpen(true)}>
      <SystemUpdateIcon />
    </IconButton>
  </Tooltip>
  <ModalWorkflow
    open={open}
    onClick={() => {}}
    onClose={closeHandler}
    onCreate={onCreate}
    namespace="default"
    templateName="update-system"
    initialState={{ url, entityRef, system: entity?.spec?.system ?? '' }}
    onError={(_e) => {
      // eslint-disable-next-line no-console
      console.log('optional error handler')
    }}
  >
    <ScaffolderFieldExtensions>
      <EntityPickerFieldExtension />
    </ScaffolderFieldExtensions>
    <Button
      variant="contained"
      color="primary"
      type="submit"
      onClick={onCreate as any}
    >
      Link
    </Button>
  </ModalWorkflow>
</>
```

[工作流程按钮](https://npmcn.com/package/%40frontside/backstage-plugin-scaffolder-workflow/src/components/WorkflowButton/WorkflowButton.tsx) - 如果没有形式元素或不需要用户输入,则可以通过简单的按钮点击执行脚手架工作流程,而按钮有显示状态变化消息的道具:

[演示](https://npmcn.com/package/docs/button.mp4)

```ts
<WorkflowButton
  namespace="default"
  templateName="deprecate-component"
  components={{
    idle: <Idle initialState={{ url, entityRef }} />,
    pending: <Pending />,
    error: <Error />,
    success: <Success />,
    modal: <Modal />,
  }}
/>
```

[嵌入式脚手架工作流程](https://npmcn.com/package/%40frontside/backstage-plugin-scaffolder-workflow/src/components/EmbeddedScaffolderWorkflow/EmbeddedScaffolderWorkflow.tsx) - 和传统的脚手架工作流程非常相像,只是它是一个常规组件,可以在后台实例中添加到不同的地方.

```ts
export function EntityOnboardingWorkflow(
  props: EntityOnboardingWorkflowProps,
): JSX.Element | null {
  const { entity } = useEntity();

  const entityRef = stringifyEntityRef(entity);

  const catalogInfoUrl = entity.metadata?.annotations?.[
    ANNOTATION_ORIGIN_LOCATION
  ].replace(/^url:/, '');

  assert(
    !!catalogInfoUrl,
    `no catalog-info.yaml url in ${ANNOTATION_ORIGIN_LOCATION} annotation`,
  );

  return (
    <EmbeddedScaffolderWorkflow
      {...props}
      initialState={{ catalogInfoUrl, entityRef }}
    />
  );
}
```

## 常见问题

### @frontside/backstage-plugin-scaffolder-workflow 是什么？

脚手架工作流程是 后台 这会减轻写锅炉板 几乎任何情况的痛苦\.

### 如何安装 @frontside/backstage-plugin-scaffolder-workflow？

在项目目录运行 npm install @frontside/backstage-plugin-scaffolder-workflow，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^16\.13\.1 \|\| ^17\.0\.0）、react-router-dom（^6\.x\.x）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @frontside/backstage-plugin-scaffolder-workflow 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @frontside/backstage-plugin-scaffolder-workflow 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @frontside/backstage-plugin-scaffolder-workflow 可以商用吗？

@frontside/backstage-plugin-scaffolder-workflow 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @frontside/backstage-plugin-scaffolder-workflow 的下载量有多少？

根据 npm 官方下载统计，@frontside/backstage-plugin-scaffolder-workflow 在 2026/10/16 – 2026/11/14 这 30 天内被下载 2,411 次，日均约 80 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @frontside/backstage-plugin-scaffolder-workflow 还在维护吗？

最新版本 0\.10\.2 发布于 2024/08/14（2 年前）；至今共发布 31 个版本，其中过去 12 个月发布了 0 个；首次发布于 2023/02/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。