# @componentdriven/csf 中文文档

规范地址：https://npmcn.com/package/%40componentdriven/csf/

版本：0\.0\.2-alpha\.0
npm 元数据更新时间：2022-04-05T00:41:28.167Z
中文译文更新时间：2026-11-10T13:49:13.476Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40componentdriven/csf
原文对照：https://npmcn.com/package/%40componentdriven/csf/?lang=original
项目主页：https://github.com/ComponentDriven/csf
源码仓库：https://github.com/ComponentDriven/csf

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

- 包体积（解压后）：21 kB，13 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2020-08-07T00:18:18.831Z
- 最新版本发布：2020-08-07T00:18:19.223Z
- 近 30 天下载量：16587（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

组件故事格式工具

## 安装

```sh
npm install @componentdriven/csf
```

也可以使用：`pnpm add @componentdriven/csf`、`yarn add @componentdriven/csf`、`bun add @componentdriven/csf`

## README

![](https://raw.githubusercontent.com/ComponentDriven/csf/polish-readme/csf-header.png)

# 组件故事格式( CSF)

### 为什么是标准格式?

成分已经占据了UI的地貌. 在开发、测试、设计和原型方面,有新的面向组件的工具。 这些工具用于创建和消费组件和组件实例(a.k.a.故事)。 但每个工具都有自己的专有格式,因为表达组件实例的简单而可知的方法尚不存在.

### "史记"为一成分之真源.

一个故事是一个代码片段,它使一个组件在某个特定状态下成为实例. 考虑一下吧[用户故事](https://en.wikipedia.org/wiki/User_story)" ..

它使用被运至用户的生产代码,使其成为一个组件示例的最准确的表述. 还有,故事用你用来构建应用程序的视图层来表达.

### 组件故事格式

组件故事格式是一个基于JavaScript ES6模块的组件示例开放标准. 这使开发、测试和设计工具之间能够相互合作.

```js
export default { title: 'atoms/Button' };
export const text = () => <Button>Hello</Button>;
export const emoji = () => <Button>😀😎👍💯</Button>;
```

💎 **很简单.** 写入组件"故事"与使用干净,被广泛使用的格式输出ES6函数一样容易.

🚚 **非专有.** CSF不需要任何针对供应商的图书馆. 在ES6模块直播的任何地方, 包括你最喜欢的测试工具如Jest和Cypress.

☝️ **宣说.** 宣示语法是等同于MDX等更高级格式,能进行清洁可核查的转化.

🔥 **被优化了.** 组件故事不需要除您组件以外的任何库. 而且因为它们是ES6模块,它们甚至可以被树震动!

### 谁用CSF?

**工具 :** [故事书](https://storybook.js.org/), (中文(简体) ), [UXPin 密码](https://www.uxpin.com/) 打开 [网络组件.dev](https://webcomponents.dev/)

**与 :** [欢乐](https://jestjs.io/), (中文(简体) ), [酶](https://enzymejs.github.io/enzyme), (中文(简体) ), [测试库](https://testing-library.com/), (中文(简体) ), [齐压](https://www.cypress.io/), (中文(简体) ), [摩诃迦叶](https://mochajs.org/)等 (中文(简体) ).

## CSF 公用事业

用于处理 [组件故事格式( CSF)](https://storybook.js.org/docs/formats/component-story-format/)。 。 。 .

### 安装

```sh
yarn add @componentdriven/csf
```

### API 密码

函数定义和类型参见软件包源 :

-   `storyNameFromExport(key)` - 加强出口名称(`key`故事的情节。 目前执行 [启动线索](https://lodash.com/docs/4.17.11#startCase)。 。 。 .
    
-   `isExportStory(key, { includeStories, excludeStories })` - 一个被命名的导出是否匹配CSF的包含/排除选项?
    
-   `parseKind(kind, { rootSeparator, groupSeparator })` - 使用给定的分隔符配置从路径中解析组件/类型名称.
    
-   `sanitize(string)` - 从故事ID中删除标语和非法字符.
    
-   `toId(kind, name)` - 从组件/类型和故事名称中生成故事本ID.
    

## 捐款

如果您有任何建议,请打开一个问题或公关.

欢迎所有的贡献!

### 运行测试 :

```sh
yarn test
```

## 常见问题

### @componentdriven/csf 是什么？

组件故事格式工具

### 如何安装 @componentdriven/csf？

在项目目录运行 npm install @componentdriven/csf，或使用 pnpm add / yarn add / bun add。

### @componentdriven/csf 支持 TypeScript 吗？

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

### @componentdriven/csf 支持 ESM 还是 CommonJS？

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

### @componentdriven/csf 可以商用吗？

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

### @componentdriven/csf 的下载量有多少？

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

### @componentdriven/csf 还在维护吗？

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