canvas-workbench

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Installation gate

安装前置检查

Before trying to use Workbench, detect the project's package manager and use its executable runner for

@drupal-canvas/workbench

Preferred commands:

npm:
```
npx @drupal-canvas/workbench
```
pnpm:
```
pnpm dlx @drupal-canvas/workbench
```
bun:
```
bunx @drupal-canvas/workbench
```
yarn:
```
yarn dlx @drupal-canvas/workbench
```

Choose the command that matches the repository's package manager. Use lockfiles and existing project conventions to decide.

If the package runner or

@drupal-canvas/workbench

is not available, stop and tell the user that Canvas Workbench is not available in the current environment. Ask whether they want you to install it. If they say yes, install

@drupal-canvas/workbench

as a dev dependency with the matching package manager:

npm:

npm install --save-dev @drupal-canvas/workbench

pnpm:

pnpm add --save-dev @drupal-canvas/workbench

bun:
```
bun add --dev @drupal-canvas/workbench
```
yarn:
```
yarn add --dev @drupal-canvas/workbench
```

After installation completes, use the matching runner command and continue with Workbench verification. If the user says no, stop and do not guess alternate startup commands.

在尝试使用Workbench之前，先检测项目的包管理器，并使用其可执行运行器来调用

@drupal-canvas/workbench

。

推荐命令：

npm:
```
npx @drupal-canvas/workbench
```
pnpm:
```
pnpm dlx @drupal-canvas/workbench
```
bun:
```
bunx @drupal-canvas/workbench
```
yarn:
```
yarn dlx @drupal-canvas/workbench
```

选择与仓库包管理器匹配的命令。可通过锁文件和现有项目约定来确定。

如果包运行器或

@drupal-canvas/workbench

不可用，请停止操作并告知用户当前环境中无法使用Canvas Workbench。询问用户是否需要安装它。如果用户同意，则使用匹配的包管理器将

@drupal-canvas/workbench

安装为开发依赖：

npm:

npm install --save-dev @drupal-canvas/workbench

pnpm:

pnpm add --save-dev @drupal-canvas/workbench

bun:
```
bun add --dev @drupal-canvas/workbench
```
yarn:
```
yarn add --dev @drupal-canvas/workbench
```

安装完成后，使用匹配的运行器命令并继续Workbench验证。如果用户拒绝，则停止操作，不要尝试其他启动命令。

Configuration gate

配置前置检查

Workbench does not require a

canvas.config.json

file when the project uses the default Canvas layout.

Before starting Workbench, check whether the project appears to use the default paths:

```
componentDir
```
: project root
```
pagesDir
```
:
```
./pages
```
```
aliasBaseDir
```
:
```
src
```

globalCssPath

./src/components/global.css

If the project uses those defaults and

canvas.config.json

is missing, proceed without creating one.

If the project uses different component paths, pages paths,

@/

import resolution, or global CSS entrypoints, add or update

canvas.config.json

in the project root before starting Workbench. Set only the options the project needs.

Example:

json

{
  "componentDir": "./components",
  "pagesDir": "./pages",
  "aliasBaseDir": "src",
  "globalCssPath": "./src/components/global.css"
}

当项目使用默认Canvas布局时，Workbench不需要

canvas.config.json

文件。

在启动Workbench之前，检查项目是否使用默认路径：

```
componentDir
```
: 项目根目录
```
pagesDir
```
:
```
./pages
```
```
aliasBaseDir
```
:
```
src
```

globalCssPath

./src/components/global.css

如果项目使用上述默认配置且缺少

canvas.config.json

，则无需创建该文件，直接继续操作。

如果项目使用不同的组件路径、页面路径、

@/

导入解析规则或全局CSS入口点，则在启动Workbench之前，需要在项目根目录中添加或更新

canvas.config.json

。仅设置项目所需的配置项即可。

示例：

json

{
  "componentDir": "./components",
  "pagesDir": "./pages",
  "aliasBaseDir": "src",
  "globalCssPath": "./src/components/global.css"
}

Start Workbench

启动Workbench

When Workbench verification is needed and the package-runner command is available:

Run the matching Workbench command from the project root.
Treat it as a long-running local dev server process.
Read the startup output and use the local URL it prints.
Leave the server running while you verify the result.

If a Workbench server is already running for the current project, reuse it instead of starting a second instance.

当需要进行Workbench验证且包运行器命令可用时：

从项目根目录运行匹配的Workbench命令。
将其视为长期运行的本地开发服务器进程。
读取启动输出并使用其打印的本地URL。
在验证结果期间保持服务器运行。

如果当前项目的Workbench服务器已在运行，则直接复用该实例，无需启动第二个。

Verification workflow

验证工作流

Use Workbench as part of the normal implementation loop:

Start or reuse Workbench.
Open the relevant component or preview state.
Verify that the requested change renders correctly.
If the result is wrong, update the implementation and verify again.
Finish only after Workbench verification passes, or explain clearly what blocked verification.

将Workbench纳入常规开发循环：

启动或复用Workbench。
打开相关组件或预览状态。
验证请求的更改是否正确渲染。
如果结果不符合预期，更新实现并再次验证。
仅在Workbench验证通过后结束操作，或清晰说明阻碍验证的原因。

Scope

适用范围

This skill is for starting and using Workbench, not for defining the Canvas component contract or detailed mock authoring rules.

Use
```
canvas-component-definition
```
when creating or validating the component structure,
```
component.yml
```
, naming, or mock coverage expectations.

Use

canvas-component-definition/references/workbench-mocks.md

when you need to author or validate

mocks.json

本技能适用于启动和使用Workbench，不适用于定义Canvas组件契约或详细的模拟文件编写规则。

当创建或验证组件结构、
```
component.yml
```
、命名规范或模拟覆盖要求时，请使用
```
canvas-component-definition
```
。

当需要编写或验证

mocks.json

时，请使用

canvas-component-definition/references/workbench-mocks.md

。