# @box/blueprint-web 中文文档

规范地址：https://npmcn.com/package/%40box/blueprint-web/

版本：18\.10\.3
npm 元数据更新时间：2026-11-06T03:57:04.323Z
中文译文更新时间：2026-11-08T12:45:41.031Z
软件包许可：SEE LICENSE IN LICENSE

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

原始 npm 页面：https://www.npmjs.com/package/%40box/blueprint-web
原文对照：https://npmcn.com/package/%40box/blueprint-web/?lang=original

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

- 包体积（解压后）：2.8 MB，1117 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：28 个
- peer 依赖：react ^18\.0\.0，react-dom ^18\.0\.0
- 首次发布：2024-02-05T16:36:13.969Z
- 最新版本发布：2026-11-06T03:57:04.109Z
- 近 30 天下载量：60654（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：942（近 12 个月 407 个）

## 中文简介

暂无中文简介

## 安装

```sh
npm install @box/blueprint-web
```

也可以使用：`pnpm add @box/blueprint-web`、`yarn add @box/blueprint-web`、`bun add @box/blueprint-web`

## README

-   [蓝图网络](https://npmcn.com/package/%40box/blueprint-web/#readme-blueprint-web)
    -   [概览](https://npmcn.com/package/%40box/blueprint-web/#readme-overview)
    -   [捐款](https://npmcn.com/package/%40box/blueprint-web/#readme-contribution)
        -   [第1步:创建特性分支](https://npmcn.com/package/%40box/blueprint-web/#readme-step-1-create-a-feature-branch)
        -   [第2步: 推动您的特性分支](https://npmcn.com/package/%40box/blueprint-web/#readme-step-2-push-your-feature-branch)
        -   [步骤3:打开拉出请求](https://npmcn.com/package/%40box/blueprint-web/#readme-step-3-open-pull-request)
        -   [提交类型](https://npmcn.com/package/%40box/blueprint-web/#readme-commit-types)
    -   [软件包安装](https://npmcn.com/package/%40box/blueprint-web/#readme-package-installation)
    -   [构成部分发展](https://npmcn.com/package/%40box/blueprint-web/#readme-component-development)
    -   [先决条件](https://npmcn.com/package/%40box/blueprint-web/#readme-prerequisites)
    -   [项目设置](https://npmcn.com/package/%40box/blueprint-web/#readme-project-setup)
    -   [使用蓝图网络组件](https://npmcn.com/package/%40box/blueprint-web/#readme-use-blueprint-web-components)
        -   [项目脚本](https://npmcn.com/package/%40box/blueprint-web/#readme-project-scripts)
    -   [所有权](https://npmcn.com/package/%40box/blueprint-web/#readme-ownership)
    -   [测试](https://npmcn.com/package/%40box/blueprint-web/#readme-testing)

# 蓝图网络

蓝图网是UI组件的综合集合,可供工程团队用于产品 发展。 你可以检查已经交付的组件 在我们 [门户](https://go/dsys)。 。 。 .

## 概览

蓝图网络是下一步 [布丽](https://github.com/box/box-ui-elements) 目前拥有列表的库 缺点。 更多地了解对蓝图的调查和决定 网络 [从初步调查开始](https://npmcn.com/package/%40box/blueprint-web/docs/archived-docs/BACKGROUND.md)。 。 。 .

蓝图网的主要好处:

-   不需要从零开始创建 Box 广泛使用的 UI 组件
-   所有组件都放在一个包中
-   所有组件都有最新的UI
-   组件可组成且易于使用
-   寄存器由#蓝印团队维护.

## 捐款

### 第1步:创建特性分支

创建带有描述名的分支, 如 `add-icon-button`。 。 。 .

### 第2步: 推动您的特性分支

我们用 [语义释放](https://github.com/semantic-release/semantic-release#commit-message-format) 财务报告和审定财务报表 页:1 [常规发送消息格式](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional)。 。 。 .

为您要处理的每个问题保留一个单独的特性分支 。 当你开发代码时,继续将代码推向您的 特性分支.

承诺信息摘要应是对变化的一刑一刑描述,其长度必须是72个字符或 短一点 对于一个标签列表, 请 [点击这里](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional#type-enum)。 。 。 . 见 页:1 [默认释放规则](https://github.com/conventional-changelog/commitlint/blob/master/%40commitlint/config-conventional/index.js) 基于承诺标记。 请注意,您必须包含 打破更改的精确关键字“ Breaking Change ” 以学习 更多 [点击这里](https://github.com/conventional-changelog/conventional-changelog/blob/master/packages/conventional-changelog-conventionalcommits/parserOpts.js#L12)。 。 。 .

下面显示的是基于承诺消息的释放类型实例 .

### 步骤3:打开拉出请求

请确保您的公关名称包含一个 Jira 票号 - 这将自动更新您的 Jira 票并移动 它的状态.

添加拉动请求描述 - 描述您的变化的预期结果和动机 。 与公关的链接将是: 包含在变更日志中,因此良好的描述将便于理解并提供迁移/使用指南 你的密码.

### 提交类型

"Semantic sexting"指对包的版本编号(例如. `3.42.11` 改为 `3.43.0`) 已完成 根据说明变化将如何影响消费者的规则。 更多信息 页:1 [npm 页](https://docs.npmjs.com/about-semantic-versioning)。 。 。 .

版本编号被细分为3个位置—— `Major.Minor.Patch`在语义释出术语中,修改 数字跟着 `Breaking.Feature.Fix`编辑 `semantic-release` 脚本解析消息并决定类型 根据上次释放以来发现的犯法行为类型释放.

关于承诺类型的规则是:

-   任何修改或删除 API、选项或输出格式的都是 `BREAKING CHANGE`。 。 。 .
-   任何以倒向相容的方式添加新功能的功能都是一个特征(`feat`) (中文(简体) ). 消费者必须升级到 使用该特性的新版本, 但是如果它们这样做, 则不会中断 .
-   错误修正( E)`fix`对于已存在的行为是一个补丁. 消费者除了升级之外别无他法.
    -   绩效修正( E)`perf`)和还原(`revert`)作为补丁释放处理.
    -   Box 内部化团队的自动输入会因使用格式而导致补丁 `fix(moji): ***`。 。 。 .
-   其他前缀,例如 `docs`,不要触发释放,不要出现在更改日志中。 这些标记表示那里 为: **无外部更改 _任意_ APIs 密码** (包括非破损的). 只有当释放脚本检测到其他可释放的承诺( 壮举/固定)同时出道.
    -   `build`, (中文(简体) ), `ci`, (中文(简体) ), `chore`, (中文(简体) ), `docs`, (中文(简体) ), `refactor`, (中文(简体) ), `style`, (中文(简体) ), `test`

在大多数情况下,犯法行为将构成 `feat` 或者说 `fix`确保包括 `BREAKING CHANGE` 概要中的字符串,如果 承诺中有不可逆的改变.

详见 [文件](https://npmcn.com/package/%40box/blueprint-web/docs/contribution/01-contribution-overview.stories.mdx)。 。 。 .

## 软件包安装

如果要使用"蓝图"网络作为软件包,需要将其安装为依赖:

```
yarn add @box/blueprint-web
```

蓝图网络需要手动安装某些对等依赖,以防止库重复. 名单 需要的同伴依赖关系,参见 [软件包.json](https://npmcn.com/package/%40box/blueprint-web/package.json)。 。 。 .

## 构成部分发展

如果要开始开发并添加自己的组件,需要先设置项目. 创建库时 [无](https://nx.dev/)。 。 。 .

## 先决条件

-   所需数额 `node` 版本为qq20.18

## 项目设置

为营造发展环境,要采取以下步骤: 一,大力营造发展环境

1.  使用 SSH 协议克隆寄存器 [引导到这里](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)
    
2.  在根目录中,运行以下命令来运行故事本:
    
    ```
     yarn install
    
     yarn bootstrap
    
     yarn nx storybook blueprint-web
    ```
    

## 使用蓝图网络组件

此示例显示您可以使用 `Button` 应用程序中的组件. 样式在导入任何蓝图网络组件时自动导入.

```js
import { Button } from '@box/blueprint-web';

function App() {
    return (
        <div className="App">
            <Button>Button</Button>
        </div>
    );
}

export default App;
```

您还需要扩展您的项目 `webpack.config.js` 下一条规则:

```js
module: {
    rules: [
        {
            test: /\.(js|mjs)$/,
            resolve: {
                fullySpecified: false, // don't require .mjs extension for module packages
            },
        },
    ];
}
```

### 项目脚本

-   `yarn nx storybook blueprint-web` 创建并运行故事书
-   `yarn nx test blueprint-web` 以通过 [欢乐](https://jestjs.io/)
-   `yarn nx lint blueprint-web` 检查林丁
-   `yarn nx g @nx/react:component MyNewComponentName --project=blueprint-web --export` 生成新的 构成部分[文档](https://nx.dev/packages/react)(中文(简体) )
-   `yarn nx g @nx/react:component-story --project=blueprint-web --componentPath lib/MyNewComponentName/MyNewComponentName.tsx` 为您的组件生成新的故事书故事

## 所有权

这回波是由发射板团队拥有和维护的 你可以在 [蓝印](https://grid-box.enterprise.slack.com/archives/C0379RP2Q4U) 斯克频道.

## 测试

详见 [测试文件](https://npmcn.com/package/%40box/blueprint-web/docs/contribution/03-component-contribution/05-testing.mdx)。 。 。 .

## 常见问题

### 如何安装 @box/blueprint-web？

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

### @box/blueprint-web 支持 TypeScript 吗？

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

### @box/blueprint-web 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @box/blueprint-web 可以商用吗？

@box/blueprint-web 使用 SEE LICENSE IN LICENSE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @box/blueprint-web 的下载量有多少？

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

### @box/blueprint-web 还在维护吗？

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