# @doist/reactist 中文文档

规范地址：https://npmcn.com/package/%40doist/reactist/

版本：37\.4\.0
npm 元数据更新时间：2026-09-08T04:49:40.909Z
中文译文更新时间：2026-11-12T15:39:58.213Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：4.8 MB，599 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=24
- 运行依赖：8 个
- peer 依赖：@ariakit/react ~0\.4\.19，classnames ^2\.2\.5，react \>=18\.0\.0 \<20\.0\.0，react-compiler-runtime ^1\.0\.0，react-dom \>=18\.0\.0 \<20\.0\.0，react-transition-group ^4\.4\.5
- 首次发布：2017-05-08T13:55:21.703Z
- 最新版本发布：2026-09-08T04:49:40.617Z
- 近 30 天下载量：3251（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：374（近 12 个月 44 个）

## 中文简介

Doist 的开源反应组件

## 安装

```sh
npm install @doist/reactist
```

也可以使用：`pnpm add @doist/reactist`、`yarn add @doist/reactist`、`bun add @doist/reactist`

## README

# 反应器

开源反应组件由多伊斯特制作.

[![npm version](https://badge.fury.io/js/%40doist%2Freactist.svg)](https://badge.fury.io/js/%40doist%2Freactist) [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com/)

**[看看我们的现场演示.](http://doist.github.io/reactist)** 它包括目前实施的所有组件,外加一个现场游乐场,以便在不同州与它们互动.

# 如何使用反应器

您可以通过从 npm 安装来为您的项目添加反应器 :

```sh
npm install @doist/reactist
```

要导入代码中的组件 :

```js
import { Loading } from '@doist/reactist'
//OR
import Loading from '@doist/reactist/dist/Loading'
```

您还需要在您的应用程序中装入反应器的 CSS 文件 。 例如:

```html
<link rel="stylesheet" type="text/css" href="./node_modules/@doist/reactist/styles/Loading.css" />
```

如果您喜欢包含静态文件 抓取 [从 dist 文件夹中修改构建](https://github.com/Doist/reactist/tree/develop/dist)。 。 。 .

```html
<script src="./node_modules/@doist/reactist/dist/reactist.cjs.production.min.js"></script>
<link rel="stylesheet" type="text/css" href="./node_modules/@doist/reactist/styles/reactist.css" />
```

## 他们

反应师烤出一个光调色板(`@doist/product-libraries-tokens`改为: `reactist.css`。要使用阴暗或口音主题,请加载主题文件之一 Reactist再导出并切换其类于根元素:

```html
<link rel="stylesheet" href="./node_modules/@doist/reactist/styles/tokens/<theme_name>.css" />
```

```js
import '@doist/reactist/styles/tokens/<theme_name>.css'
```

然后设置匹配类 `:root`。每个主题文件设置自己的 `color-scheme`,所以你不需要自己宣布——下面一栏是得到的,而不是你设定的.

| 主题/ 文件名 | 颜色方案 | 类 |
| --- | --- | --- |
| `td-light` | `light` | 无 |
| `td-dark` | `dark` | `theme_dark` |
| `td-blueberry` | `light` | `theme_blueberry` |
| `td-blueberry-dark` | `dark` | `theme_blueberry_dark` |
| `td-gold` | `light` | `theme_gold` |
| `td-gold-dark` | `dark` | `theme_gold_dark` |
| `td-kale` | `light` | `theme_kale` |
| `td-kale-dark` | `dark` | `theme_kale_dark` |
| `td-lavender` | `light` | `theme_lavender` |
| `td-lavender-dark` | `dark` | `theme_lavender_dark` |
| `td-moonstone` | `light` | `theme_moonstone` |
| `td-moonstone-dark` | `dark` | `theme_moonstone_dark` |
| `td-raspberry` | `light` | `theme_raspberry` |
| `td-raspberry-dark` | `dark` | `theme_raspberry_dark` |
| `td-tangerine` | `light` | `theme_tangerine` |
| `td-tangerine-dark` | `dark` | `theme_tangerine_dark` |

# 更改日志

你可以找到我们的更衣室 [这里](https://npmcn.com/package/%40doist/reactist/CHANGELOG.md)。 。 。 .

# 发展

我们利用 `package.json`是因为 `engines` 字段指定开发时要使用的节点/npm版本。 快速切换的最简单方法是通过 [fnm 时](https://github.com/Schniz/fnm)。 。 。 .

值得注意的是,fnm可以在项目遇到一个时自动切换到指定的节点版本 `.nvmrc` 文档。 要做到这一点,使用 `--use-on-cd` 旗帜时 [生成您的外壳配置脚本 `fnm env`](https://github.com/Schniz/fnm#fnm-env)。 。 。 .

Fnm安装后,克隆寄存器. 然后,切换到所需的节点版本,并运行它的设置任务:

```sh
git clone https://github.com/doist/reactist.git
cd reactist
fnm install
fnm use
npm run setup
```

设置任务将安装依赖性,并运行各种验证(linting,type check,测试).

我们为反应论者确定了两大发展模式。 首先,运行一个互动的故事本,并看到您在孤立环境中对一个组件所做的改变. 这对于开发新的组件尤其有帮助。 第二,改进现实应用中的现有组件.

## 创建新组件

利用新的组件模板生成能力简化了新组件的开发 [弹出](https://plopjs.com/)数字 :

```sh
npm run plop component
```

此命令将提示您提供创建新组件模板所需的全部信息 。 需要的最重要的信息是组件名称,即使作为短语也可以提供(例如"下拉选择"将生成一个 `DropdownSelect` 组件模板).

生成的源文件包括带有样本道具和样式的组件执行,外加一个小测试文件和故事本源文件.

您还需要通过在 [顶级索引文件](https://npmcn.com/package/%40doist/reactist/src/index.ts)。 。 。 .

## 故事书

第一个开发模式运行 :

```sh
npm run storybook
```

在http://localhost:6006上, 你可以在现存故事的组件上脚踏实地,或者添加一个全新的.

## 在你的申请中

对于第二个开发模式,你可以杠杆 `npm start:yalc`首先,确保你有 `yalc` 全球安装:

```shell
npm install -g yalc
```

然后,在反应论寄存器中运行:

```sh
npm run start:yalc
```

这将发布反应器到 `yalc` 并观察变化.

在您的主机应用程序中, 您可以链接到您的本地反应器版本 :

```sh
cd ~/your-app
yalc add @doist/reactist
```

要取消修改,并从 npm 切换回反应器版本,请做以下操作:

```sh
cd ~/your-app
# restore the original reactist version
yalc remove @doist/reactist
# re-install reactist from npm
npm install
```

为了方便,你可以加一个 `dev:reactist` 您主机应用程序中的脚本可以自动添加并删除本地反应器版本的进程 :

```json5
{
    // ...
    scripts: {
        // ...
        'predev:reactist': 'yalc add @doist/reactist',
        'dev:reactist': 'npm run dev', // or whatever your development script is
        'postdev:reactist': 'yalc remove @doist/reactist && npm i',
    },
}
```

然后,为了发展反反应主义者,只是运行:

```sh
npm run dev:reactist
```

## 发展技巧和技巧

独立于您运行以生产新建筑的开发( 如在提交 PR 之前) 运行 :

```sh
npm run build
```

**说明:** 这个会 **没有** 更新文件。 如果您想要更新您需要运行的文件 :

```sh
npm run build:storybook
```

# 测试

测试通过运行执行 :

```sh
npm run test
```

在开发过程中,您可能会发现持续进行测试是有益的。 此操作可运行 :

```sh
npm run test -- --watch
```

MacOS的用户可能需要更新监视器 `brew install watchman` 当遇到手表模式的麻烦时。 详情见此: [https://github.com/facebook/jest/issues/1767 (中文(简体) )](https://github.com/facebook/jest/issues/1767)

## 色谱视觉回归测试

反应师依赖 [色谱](https://www.chromatic.com/) 在GitHub的CI步骤中 对我们组件进行视觉回归测试.

### 启用测试

为了进行这种测试,只需添加 `chromatic: { disableSnapshot: false }` 作为故事中的故事参数. 示例

```
<Canvas>
    <Story
        name="Main demo"
        parameters={{
            docs: { source: { type: 'code' } },
            chromatic: { disableSnapshot: false },
        }}
    >
        <BannerExamples theme="light" />
    </Story>
</Canvas>
```

我们建议你让这些测试 在那些故事故事中, 有几种不同的变体 正在测试。 多数情况下.

### 审查测试

当你打开了GitHub PR,你会注意到"UI Review"和"UI Tests"的CI步骤.

-   点击"Details"将带入Chromatic UI(如果你还没有Chromatic账户,请使用您的GitHub账户注册).
-   现在您可以检讨并接受您的修改(或者回去修改您的代码).
-   乐取所取之变化时,须将所取之变化作"经".

# 释放

这个项目使用 [语义释放](https://github.com/semantic-release/semantic-release) 实现版本管理和软件包出版的自动化.

## 如何运作

1.  使用 [常规武器委员会](https://www.conventionalcommits.org/)数字 :
    
    -   以下任何类型加上 `!` 后缀(例如:. `feat!:`, (中文(简体) ), `fix!:`或一个 `BREAKING CHANGE:` 断开更改的页脚( 主要版本出错)
    -   `feat:` 用于新特性(小版本起伏)
    -   `fix:` 对于错误修正( patch 版本出错)
    -   `perf:` 用于改进性能(patch版本起伏)
    -   `refactor:` 用于重构代码
    -   `test:` 用于添加/更新测试
    -   `build:` 建筑物/依赖性变化
    -   `docs:` 文件更改
    -   `ci:` cI 修改
    -   `revert:` 退还先前的承付款
    -   `chore:` 用于维护任务(注:这些未列入更改日志)
    
    任何类型都可以带有可选范围,例如. `feat(button):` 或者说 `perf(tooltip)!:`。 。 。 .
    
2.  当公关合并为 `main`,则 [软件包发布](https://npmcn.com/package/%40doist/reactist/.github/workflows/publish-package-release.yml) 工作流程运行和语义发布:
    
    -   读取合并承诺的常规承诺类型以确定版本的凸起
    -   更新 `CHANGELOG.md`, (中文(简体) ), `package.json`,以及 `package-lock.json`,并让他们回到 `main`
    -   创建新标签和 GitHub 发布
    -   将软件包发布到 npm 和 GitHub 软件包

合并只有在包含一个上面标有版本凸起的类型时才会触发发行;否则将不发布.

在 GitHub 页面上主持的故事书,每次推到 `main`如果有问题,请尝试手动操作 [动作设置](https://github.com/Doist/reactist/actions)。 。 。 .

## 谢谢

[![Chromatic](https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png)](https://www.chromatic.com/)

感谢 [色谱](https://www.chromatic.com/) 提供视觉测试平台 帮助我们审查UI的变化 并捕捉视觉回归.

## 常见问题

### @doist/reactist 是什么？

Doist 的开源反应组件

### 如何安装 @doist/reactist？

在项目目录运行 npm install @doist/reactist，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@ariakit/react（~0\.4\.19）、classnames（^2\.2\.5）、react（\>=18\.0\.0 \<20\.0\.0）、react-compiler-runtime（^1\.0\.0）、react-dom（\>=18\.0\.0 \<20\.0\.0）、react-transition-group（^4\.4\.5）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @doist/reactist 支持 TypeScript 吗？

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

### @doist/reactist 支持 ESM 还是 CommonJS？

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

### @doist/reactist 需要什么版本的 Node\.js？

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

### @doist/reactist 可以商用吗？

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

### @doist/reactist 的下载量有多少？

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

### @doist/reactist 还在维护吗？

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