# @contentful/f36-components 中文文档 规范地址：https://npmcn.com/package/%40contentful/f36-components/ 版本：6\.30\.0 npm 元数据更新时间：2026-11-04T07:46:48.270Z 中文译文更新时间：2026-11-10T16:34:08.037Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40contentful/f36-components 原文对照：https://npmcn.com/package/%40contentful/f36-components/?lang=original 项目主页：https://github.com/contentful/forma-36#readme 源码仓库：https://github.com/contentful/forma-36 ## 关键信息（来自 npm 元数据） - 包体积（解压后）：31.6 kB，12 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：40 个 - peer 依赖：react ^18\.3\.0 \|\| \>=19\.1\.0，react-dom ^18\.3\.0 \|\| \>=19\.1\.0，@types/react ^18\.3\.0 \|\| \>=19\.1\.0，@types/react-dom ^18\.3\.0 \|\| \>=19\.1\.0 - 首次发布：2021-03-05T08:38:29.829Z - 最新版本发布：2026-11-04T07:46:48.049Z - 近 30 天下载量：1538991（2026-10-11 至 2026-11-09，npm 官方下载统计） - 已发布版本数：566（近 12 个月 68 个） ## 中文简介 内容化 UI 组件库 ## 安装 ```sh npm install @contentful/f36-components ``` 也可以使用：`pnpm add @contentful/f36-components`、`yarn add @contentful/f36-components`、`bun add @contentful/f36-components` ## README # Forma 36 反应组件 用于 [福马 36](https://f36.contentful.com/) 设计系统 [内容](https://www.contentful.com/)。 。 。 . ## 目录 - [Forma 36 反应组件](https://npmcn.com/package/%40contentful/f36-components/#readme-f36-components) - [目录](https://npmcn.com/package/%40contentful/f36-components/#readme-table-of-contents) - [安装软件包](https://npmcn.com/package/%40contentful/f36-components/#readme-installing-package) - [使用量](https://npmcn.com/package/%40contentful/f36-components/#readme-usage) - [导入想要的组件到您的工程中](https://npmcn.com/package/%40contentful/f36-components/#readme-import-desired-component-into-your-project) - [发展](https://npmcn.com/package/%40contentful/f36-components/#readme-development) - [故事书](https://npmcn.com/package/%40contentful/f36-components/#readme-storybook) - [示例组件目录结构](https://npmcn.com/package/%40contentful/f36-components/#readme-example-component-directory-structure) - [代码样式指南](https://npmcn.com/package/%40contentful/f36-components/#readme-code-style-guide) - [构成部分原则](https://npmcn.com/package/%40contentful/f36-components/#readme-component-principles) - [添加组件文件](https://npmcn.com/package/%40contentful/f36-components/#readme-adding-documentation-for-component) - [测试](https://npmcn.com/package/%40contentful/f36-components/#readme-testing) - [运行测试](https://npmcn.com/package/%40contentful/f36-components/#readme-run-tests) - [大楼](https://npmcn.com/package/%40contentful/f36-components/#readme-building) - [创建库的构建](https://npmcn.com/package/%40contentful/f36-components/#readme-create-a-build-of-the-library) - [提交](https://npmcn.com/package/%40contentful/f36-components/#readme-commits) ## 安装软件包 ```bash yarn add @contentful/f36-components ``` 或者说 ```bash npm install @contentful/f36-components ``` ## 使用量 ### 导入想要的组件到您的工程中 ```js import { Button } from '@contentful/f36-components'; ``` ## 发展 为地方发展,在回波运行的根 `pnpm install` 以安装所有依赖关系,然后 `pnpm build` 来构建所有软件包. 这个软件包依赖于其他几个Forma 36软件包,所以您需要构建所有软件包. ### 故事书 我们用 [故事书](https://storybook.js.org/) 为我们的组成部分图书馆创造一个发展环境。 要启动本地运行: ```bash pnpm storybook ``` 在创建新组件时,请在您开始前看一下我们 [福尔玛36的捐款模式](https://f36.contentful.com/introduction/contributing)。 。 。 . ### 示例组件目录结构 组件目录应类似于以下内容: ``` /my-component /examples /src index.ts // A file for exporting your component MyComponent.tsx // Your React component MyComponent.test.tsx // Component tests MyComponent.styles.ts // Component styles /stories # stories for storybook of each component inside the package README.mdx package.json ``` 欲了解更多细节,请查看文档中描述 [细节文件夹结构](https://github.com/contentful/forma-36/blob/main/docs/folder-structure.md)。 。 。 . > 如果您使用 `pnpm generate` 在 repo 根中,此结构将自动为您创建 ### 代码样式指南 [我们的代码样式指南](https://github.com/contentful/forma-36/blob/main/docs/code-style-guide.md) ### 构成部分原则 我们在创建组成部分时遵循若干原则: 1. **一个部件只负责内部间隔** 构件只应负责自身的内部间隔,绝不负责外部间隔。 这意味着,我们灵活地使用我们的组件,而不必超过边距. 这个规则唯一的例外是 [打印组件](https://f36.contentful.com/components/display-text) - 他们可以管理自己的利润。 为了处理边距和布局,你可以使用我们的核心组件,例如: - [方框](https://f36.contentful.com/components/box) - [弹性](https://f36.contentful.com/components/flex) - [网格](https://f36.contentful.com/components/grid) - [堆栈](https://f36.contentful.com/components/stack) ### 添加组件文件 我们希望确保每个组成部分都包含一个包含建议和指导方针的README文件. 保证您的组件文档包含以下部分: 1. 构成部分摘要. 2. 导入 - 提供导入组件的实例 . 3. 实例 -- -- 尝试增加几个例子,包括基本和较先进的例子,其中组件与其他组件一起使用. 4. Props (API 参考) - 属性概览 5. 内容指南 - 尝试在最佳做法中描述您组成部分的内容 6. 无障碍----如果可能,我们强烈建议提供无障碍准则. ## 测试 我们正在使用 [维特](https://vitest.dev/) 财务报告和审定财务报表 [测试库](https://testing-library.com/docs/react-testing-library/intro/) 测试我们的组件. 测试保存在组件旁边,并使用 `.test.js` 文件扩展名. ### 运行测试 ```bash pnpm test ``` 建议在开发中进行测试,可选 `--watch` 旗帜. ```bash pnpm test:watch ``` ## 大楼 我们正在使用 [s](https://tsdown.dev/) 财务报告和审定财务报表 [兴建](https://esbuild.github.io/) 合并 [微捆绑](https://www.npmjs.com/package/microbundle) 建造我们的组件库. 每个部分都是靠自己的力量 `dist` 以 : - `index.d.ts` — TypeScript 类型声明文件 - `index.js` - CJS(共同JS) - `index.modern.mjs` – 说吧 – [现代](https://github.com/developit/microbundle#-modern-mode-) 输出( 在所有现代浏览器中的工作) - `index.module.js` - 遗留的无害环境管理(ES模块)产出(用于捆绑者) - `index.umd.js` - 遗留UMD(通用模块定义)输出(用于节点和CDN) ### 创建库的构建 ```bash pnpm build ``` ## 提交 该项目使用 [Angular JS 提交信息公约](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit)通过语义释放。 见语义释出 [默认提交信件格式](https://github.com/semantic-release/semantic-release#default-commit-message-format) 详细情况. 您可以通过运行执行更改 ```bash pnpm commit ``` ## 常见问题 ### @contentful/f36-components 是什么？ 内容化 UI 组件库 ### 如何安装 @contentful/f36-components？ 在项目目录运行 npm install @contentful/f36-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.3\.0 \|\| \>=19\.1\.0）、react-dom（^18\.3\.0 \|\| \>=19\.1\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @contentful/f36-components 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @contentful/f36-components 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @contentful/f36-components 可以商用吗？ @contentful/f36-components 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @contentful/f36-components 的下载量有多少？ 根据 npm 官方下载统计，@contentful/f36-components 在 2026/10/11 – 2026/11/09 这 30 天内被下载 1,538,991 次，日均约 51,300 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @contentful/f36-components 还在维护吗？ 最新版本 6\.30\.0 发布于 2026/11/04（6 天前）；至今共发布 566 个版本，其中过去 12 个月发布了 68 个；首次发布于 2021/03/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。