# @amplitude/storybook-addon-amplitude 中文文档 规范地址：https://npmcn.com/package/%40amplitude/storybook-addon-amplitude/ 版本：3\.0\.0 npm 元数据更新时间：2026-06-26T17:03:44.640Z 中文译文更新时间：2026-11-06T01:23:13.673Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40amplitude/storybook-addon-amplitude 原文对照：https://npmcn.com/package/%40amplitude/storybook-addon-amplitude/?lang=original 项目主页：https://github.com/amplitude/storybook-addon-amplitude#readme 源码仓库：https://github.com/amplitude/storybook-addon-amplitude ## 关键信息（来自 npm 元数据） - 包体积（解压后）：24.6 kB，15 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - Node.js 要求：\>=20 - 运行依赖：2 个 - peer 依赖：storybook ^9\.0\.0 \|\| ^10\.0\.0 - 首次发布：2022-05-12T17:49:51.382Z - 最新版本发布：2025-12-11T23:40:31.542Z - 近 30 天下载量：74315（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：106（近 12 个月 1 个） ## 中文简介 一个故事书的附加内容,用于记录在海角发生的事件 ## 安装 ```sh npm install @amplitude/storybook-addon-amplitude ``` 也可以使用：`pnpm add @amplitude/storybook-addon-amplitude`、`yarn add @amplitude/storybook-addon-amplitude`、`bun add @amplitude/storybook-addon-amplitude` ## README # 故事本 - 插图 - 缩写 用于记录事件的故事手册 [广度](https://amplitude.com/)。 。 。 . [![version](https://img.shields.io/npm/v/@amplitude/storybook-addon-amplitude.svg?style=flat)](https://www.npmjs.com/package/@amplitude/storybook-addon-amplitude) [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://github.com/amplitude/storybook-addon-amplitude/blob/main/LICENSE) [![Auto Release](https://img.shields.io/badge/release-auto.svg?colorA=888888&colorB=9B065A&label=auto)](https://github.com/intuit/auto) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat)](https://github.com/amplitude/storybook-addon-amplitude/issues?q=archived:false+is:issue+is:open+sort:updated-desc+label%3A%22help%20wanted%22%2C%22good%20first%20issue%22) [![All Contributors](https://img.shields.io/badge/all_contributors-6-green.svg?style=flat)](https://npmcn.com/package/%40amplitude/storybook-addon-amplitude/#readme-contributors) 读取 [这里的博客文章](https://amplitude.engineering/product-analytics-for-storybook-introducing-the-amplitude-storybook-add-on-e8857fb8168a)。 。 。 . ## 先决条件 - 20或以上节点 - 故事书9.0以上 - 振幅账户(可自由分级) ## 版本兼容性 | 故事书版本 | 添加版本 | | --- | --- | | 9.x (中文(简体) ) | 3.x 运算 | | 8.x 电话 | 2.1.0 | | 7.x 电话 | 2.0.0-2.0.1 国家 | | 6.x (单位:千美元) | 1.x 运算 | ## 这有什么用? "Amplitude Storybook"在两个不同场合向"Aplitude"显示事件:当一个用户浏览到一新页面时,当一个用户更改一个故事的参数时. ## 开始 首先你需要做的是签下阿姆比特 如果你已经有帐户了,太好了! 如果你没有,你可以 [免费报名](https://amplitude.com/get-started)。 。 。 . 一旦有了账户,您就可以创建一个新的工程,它将有一个相关的 API 密钥. _注意 : 您可能想要创建一个 prod 工程和一个 dev 工程, 这样您就可以在不影响数据的情况下进行测试_ 要做到这一点,请浏览设置页面 . ![Amplitude organization settings nav](https://npmcn.com/package/%40amplitude/storybook-addon-amplitude/docs/screenshots/org-settings.png) 然后,在侧边栏中选择项目 . ![Amplitude projects nav](https://npmcn.com/package/%40amplitude/storybook-addon-amplitude/docs/screenshots/projects-nav.png) 在右上角,单击“创建工程”按钮并遵循指示. ![Amplitude create new project](https://npmcn.com/package/%40amplitude/storybook-addon-amplitude/docs/screenshots/new-project.png) 下一步, 在您的工程中将软件包安装为 devDependent: ```console # Using yarn yarn add @amplitude/storybook-addon-amplitude --dev # Using npm npm install @amplitude/storybook-addon-amplitude --save-dev ``` 内 `storybook/main.js` ```diff module.exports: { addons: [ + '@amplitude/storybook-addon-amplitude', ] } ``` 然后, 设置您的振幅 API 密钥 `./storybook/manager.js` ```ts window.AMPLITUDE_DEV_API_KEY = ""; window.AMPLITUDE_PROD_API_KEY = ""; ``` 如果您想要张贴到欧盟的端点, 请确定设置 `serverUrl` 选项 : ```ts window.AMPLITUDE_OPTIONS = { serverUrl: "https://api.eu.amplitude.com/2/httpapi", }; ``` > 更多信息: [配置](https://amplitude.com/docs/sdks/analytics/browser/browser-sdk-2#configure-the-sdk), (中文(简体) ), [终点](https://www.docs.developers.amplitude.com/analytics/apis/http-v2-api/#endpoints) 如果您在 TypeScript 工程中, 您可能想要添加以下声明 : ```ts declare global { interface Window { AMPLITUDE_DEV_API_KEY: string; AMPLITUDE_PROD_API_KEY: string; AMPLITUDE_OPTIONS: { serverUrl?: string; }; } } ``` 现在,你的故事书 将开始 发布事件 在你的工程 在海拔。 你准备好开始在海平面上创建图表了! ## 示例图表 **每周独有用户查看故事书文档** ![Amplitude weekly unique users chart](https://npmcn.com/package/%40amplitude/storybook-addon-amplitude/docs/screenshots/weekly-uniques.png) **最常用的引用类别** ![Amplitude referenced categories chart](https://npmcn.com/package/%40amplitude/storybook-addon-amplitude/docs/screenshots/referenced-categories.png) **大部分视图组件** ![Amplitude most viewed components chart](https://npmcn.com/package/%40amplitude/storybook-addon-amplitude/docs/screenshots/viewed-components.png) **最多修改参数的组件** ![Amplitude most modified arguments chart](https://npmcn.com/package/%40amplitude/storybook-addon-amplitude/docs/screenshots/modified-args.png) ## 事件分类学 ### 用户导航到新页面 当一个用户切换到新页面时,这个加通会向外观显示一个事件: ``` { event_type: "viewed documentation", event_properties: { category: "actions", page: "button" } } ``` 通过这种方式跟踪事件,您可以在“高度”中绘制图表,以显示: 1. 多少人看过你的书 2. 人们最经常看到的是哪些类别 3. 人们最经常浏览的网页 ### 用户更改一个故事的参数 当一个用户更改一个故事的参数时,这个加词会发出一个这样的事件: ``` { event_type: "updated story args", event_properties: { category: "actions", page: "button" } } ``` 以这种方式跟踪事件,您可以在“高度”中绘制图表,以回答: 1. 人们多常使用故事词库功能? 2. 在哪一类页面中人们最经常更新故事的词源? 3. 人们最经常在哪个网页上更新故事? ## 解决问题 ### 事情不出现 在振幅? - 校验您的 API 密钥设置正确 `storybook/manager.ts` - 设定 `window.AMPLITUDE_OPTIONS = { logLevel: 4 };` 内 `storybook/manager.ts` 并检查浏览器控制台中的任何错误信息 - 确保您在您的区域使用正确的服务器 URL ### 故事书没有装入? - 确保附加件被正确安装和配置 `storybook/main.ts` - 请检查date=中的日期值 (帮助) 校对:Soup ## 捐款 我们总是很高兴收到捐款! 请 [参考我们的捐款准则](https://npmcn.com/package/%40amplitude/storybook-addon-amplitude/CONTRIBUTING) 更多细节. ## 许可证 这个项目根据麻省理工学院许可证颁发——见 [自由主义](https://npmcn.com/package/%40amplitude/storybook-addon-amplitude/LICENSE) 详细文件. ## 贷项 **拥有者 :** [振幅公司](https://github.com/amplitude) **当前维护者 :** [吉米·威尔逊(@jimmynotjim)](https://github.com/jimmynotjim) **贡献者 :**

吉米·威尔逊
🐛 💻 📖 💡 🚇 👀 ⚠️ 🔧
梅·卡波齐
🐛 💻 📖 💡 🚇 👀 ⚠️ 🔧
杰克·麦克洛伊
💻 🚇 👀
蒂门·范古尔普
💻
Kaelig Deloumeau-President 总统
💻
奴隶Mitev
💻 📖 💡 🚇
布赖恩·苏
👀

武阮
👀
本项目遵循 [全部贡献者](https://github.com/all-contributors/all-contributors) 规格。 任何捐款都欢迎! ## 常见问题 ### @amplitude/storybook-addon-amplitude 是什么？ 一个故事书的附加内容,用于记录在海角发生的事件 ### 如何安装 @amplitude/storybook-addon-amplitude？ 在项目目录运行 npm install @amplitude/storybook-addon-amplitude，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：storybook（^9\.0\.0 \|\| ^10\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @amplitude/storybook-addon-amplitude 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @amplitude/storybook-addon-amplitude 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @amplitude/storybook-addon-amplitude 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=20。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @amplitude/storybook-addon-amplitude 可以商用吗？ @amplitude/storybook-addon-amplitude 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @amplitude/storybook-addon-amplitude 的下载量有多少？ 根据 npm 官方下载统计，@amplitude/storybook-addon-amplitude 在 2026/10/06 – 2026/11/04 这 30 天内被下载 74,315 次，日均约 2,477 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @amplitude/storybook-addon-amplitude 还在维护吗？ 最新版本 3\.0\.0 发布于 2025/12/12（10 个月前）；至今共发布 106 个版本，其中过去 12 个月发布了 1 个；首次发布于 2022/05/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。