# @juxtapose/storybook 中文文档

规范地址：https://npmcn.com/package/%40juxtapose/storybook/

版本：0\.13\.0
npm 元数据更新时间：2026-11-01T13:34:40.273Z
中文译文更新时间：2026-11-01T14:52:58.872Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40juxtapose/storybook
原文对照：https://npmcn.com/package/%40juxtapose/storybook/?lang=original
项目主页：https://github.com/juxtapose-dev/juxtapose#readme
源码仓库：https://github.com/juxtapose-dev/juxtapose

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

- 包体积（解压后）：186 kB，56 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.2\.0
- 运行依赖：3 个
- peer 依赖：react ^18 \|\| ^19，storybook ^8 \|\| ^9 \|\| ^10
- 首次发布：2026-07-29T10:58:38.437Z
- 最新版本发布：2026-11-01T13:34:39.895Z
- 已发布版本数：44（近 12 个月 44 个）

## 中文简介

并列的故事书插件-审查视觉差异旁边的故事，产生了他们。

## 安装

```sh
npm install @juxtapose/storybook
```

也可以使用：`pnpm add @juxtapose/storybook`、`yarn add @juxtapose/storybook`、`bun add @juxtapose/storybook`

## README

# @juxtapose /故事书

Storybook插件 [并列](https://github.com/juxtapose-dev/juxtapose) - - - - - - 在产生它们的故事旁边回顾视觉差异。

```bash
pnpm add -D @juxtapose/storybook
```

```js
// .storybook/main.js
export default {
  addons: ['@juxtapose/storybook'],
};
```

一、 **并列** 选项卡出现在插件面板中。从那里你可以捕捉到 当前故事或整个套件，以四种方式与基线进行比较 (与diff叠加、可拖动滑块、洋葱交叉渐变或 闪烁)，批准更改，并为您的代理复制带有记录的更改和图像路径的提示。

并置也注册为测试提供者：a **并列** 排在故事书里 侧边栏底部的测试模块，以及Storybook的测试模块 **运行测试** 按钮将可视化套件与其他测试一起运行。测试提供者 需要Storybook 8.5或更高版本，并对照8.6和10.6进行检查。在早些时候 版本行不出现；这个面板可以任意工作。

这个 **什么改变了** 部分使用现有报告的结构摘要， 具有可扩展的前后细节，证据限制和无法解释的区域。 如果可用，它还会显示薄片证据和建议的配置 选择并复制。建议不会自动应用。渲染器恢复 成功时报告精确的哈希匹配；它没有确定根本原因。 这些解释不需要额外的捕获或分析。

显式地显示捕获错误、取消和失败的运行。一次失败的运行 可能使以前的报告可见，标记为这样。无法获得批准 捕获错误或确认不稳定的结果；合格的批准仍然需要 一个新的确认捕获。缺失的基线图像显示当前捕获 和现有的结构证据，没有比较对照。

键盘: `j`/`k` 下一个和上一个未决捕获（包括变体）； `a` 批准, `s` 肩并肩， `w` 滑块, `o` 洋葱, `f` 闪烁, `d` diff 叠加, `u` 暗淡不变的区域，和 `z` 放大镜。快捷键忽略文本输入， 修改键和重复的键事件。审批捷径服从同样的守卫 作为按钮。

擦除滑块支持指针拖动、方向键（1%；Shift为10%）和 /结束回家。闪烁有暂停/播放控制，开始暂停时减少运动 请求，并在隐藏浏览器选项卡时暂停。如果复制代理 提示失败，其文本仍可在面板中选择。

该插件将其API安装在Storybook自己的开发服务器中，因此没有 第二个要运行的进程，没有端口要配置。

支持msw支持的故事：故事书捕获允许服务工作者。 在您的故事书中配置MSW，在开发和 静态构建，并在获取之前等待预览/加载器中的工作准备就绪 嘲笑的数据。该插件不会为您安装或配置MSW。CI验证 重复捕获的真实城市固体废物响应；例子的 `Msw.stories.jsx` 显示 的设置。这与仅url不同 `jux snap`，这阻碍了服务人员的工作。

完整的文档: [https://github.com/juxtapose-dev/juxtapose](https://github.com/juxtapose-dev/juxtapose)

MIT©Magic Factory LLC

## 常见问题

### @juxtapose/storybook 是什么？

并列的故事书插件-审查视觉差异旁边的故事，产生了他们。

### 如何安装 @juxtapose/storybook？

在项目目录运行 npm install @juxtapose/storybook，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18 \|\| ^19）、storybook（^8 \|\| ^9 \|\| ^10）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @juxtapose/storybook 支持 TypeScript 吗？

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

### @juxtapose/storybook 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @juxtapose/storybook 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.2\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @juxtapose/storybook 可以商用吗？

@juxtapose/storybook 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @juxtapose/storybook 还在维护吗？

最新版本 0\.13\.0 发布于 2026/11/01（1 天前）；至今共发布 44 个版本，其中过去 12 个月发布了 44 个；首次发布于 2026/07/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。