# @coorpacademy/components 中文文档

规范地址：https://npmcn.com/package/%40coorpacademy/components/

版本：11\.43\.2
npm 元数据更新时间：2026-11-08T23:04:59.111Z
中文译文更新时间：2026-11-10T18:13:53.152Z
软件包许可：未声明

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

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

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

- 包体积（解压后）：17.3 MB，4502 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：31 个
- peer 依赖：react ^17\.0\.2
- 首次发布：2016-01-28T10:29:52.926Z
- 最新版本发布：2026-11-06T19:24:11.279Z
- 近 30 天下载量：16843（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：2466（近 12 个月 51 个）

## 中文简介

这个库为网络应用程序提供可修饰的组件,或者:

## 安装

```sh
npm install @coorpacademy/components
```

也可以使用：`pnpm add @coorpacademy/components`、`yarn add @coorpacademy/components`、`bun add @coorpacademy/components`

## README

# @ Coorpacademy/ 组件

这个库为网络应用程序提供可修饰的组件,或者:

-   作为通用JS组件
-   作为简化的库

[![Components diagram](https://npmcn.com/package/%40coorpacademy/components/doc/components.png)](https://npmcn.com/package/%40coorpacademy/components/doc/components.svg)

## 目标

-   编辑一个组件一次, 分享到所有平台
-   提供参考每个组成部分的文件及其
    -   可用状态( 残疾, 选定)
    -   可剥取属性
-   提供最小的 lib

## 发展

### 在故事书上看到组件

```sh
yarn
npm run start
# OR
npm run start:ie # for Internet Explorer
```

然后打开 `http://localhost:3004`。 。 。 .

### 分析您的组件

这个 `props` 您的应用程序必须填写合同才能使用组件. 如果 `props` 没有适当的设定, 改变它们不是你的角色 以某种方式实现. 这个 `propTypes` 代表本合同.

铭记这一工作流程:

```sh
props -> propTypes -> fixtures -> component
```

那你的应用程序就只能读了 `propTypes` 想知道哪个 `props` 以发表意见.

### 添加组件

-   根据组件选择您的原子文件夹 : `template`, (中文(简体) ), `organism`, (中文(简体) ), `molecule`, (中文(简体) ), `atom`
-   添加包含您组件名的文件夹:例如,用于 `button` 你应该有这棵树:

```sh
atom
  └── button
        ├── index.js
        ├── style.css
        └── test
            └── fixtures
               └── default.js
               └── disabled.js
               └── hovered.js
```

-   `index.js` 包含反应代码 + jsx,并导出您的组件
-   `style.css` 包含您组件的 css 模块样式
-   `test/fixtures/*.js` 是代表您组件所有可能状态的文件,因此导出道具

注意,每当您添加新组件或新固定件时,您必须生成故事本索引 :

```sh
npm run generate
```

当运行时也会自动启动 `npm start`

### 添加一个地块

-   您需要在 en/ global.json 文件中添加您的语言
-   一定要这样 `translate: Provider.childContextTypes.translate` 对象

示例:

```
  ....

  const YourComponent = (props, context) => {
    const {translate} = context;

    return <p>{translate('your new locale')}</p>
  }

  YourComponent.contextTypes = {
    translate: Provider.childContextTypes.translate
};

  ...
```

### 使用 Lottie 动画

要使用LottieWrapper Atom动画,需要使用LottieWrapper Atom.

在洛蒂·阿通的道具中有两个 _重要事项_ 道具:动画Src & ie11 ImageBackup, 需要额外的步骤, ie11 ImageBackup是需要的,因为它的名字意味着 ie11 不 支持Lottie(更具体地说是Web组件由于Shadow DOM).

首先,您必须向 AWS S3 上传任何新的动画,在静态桶(取决于想要的嵌入)之一,例如: `https://static-staging.coorpacademy.com/animations/review/`。 。 。 .

此动画必须配对后置图像(svg),用于ie11情景.

然后,使用urls作为动画Src & ie11ImageBackup的道具,例如:

```javascript
const props = {
    'aria-label': 'aria lottie',
    'data-name': 'default-lottie',
    className: undefined,
    animationSrc: 'https://static-staging.coorpacademy.com/animations/review/rank.json',
    loop: true,
    height: 200,
    width: 200,
    ie11ImageBackup:
      'https://static-staging.coorpacademy.com/animations/review/rank_icon_congrats.svg',
    // autoplay: true // autoplay is true by default
}
```

如果您需要控制动画( 播放/ 暂停/ 停止) , 那么您必须设置自动播放到虚假( S) 增加您想要的状态, 在现有的状态中: `play, pause, stop, loading`

```javascript
const props = {
    'aria-label': 'aria lottie',
    'data-name': 'default-lottie',
    className: undefined,
    animationSrc: 'https://static-staging.coorpacademy.com/animations/review/rank.json',
    loop: true,
    height: 200,
    width: 200,
    ie11ImageBackup:
      'https://static-staging.coorpacademy.com/animations/review/rank_icon_congrats.svg',
    autoplay: false,
    animationControl: 'loading' // play can be passed directly without using loading first
}
```

#### 补充资料

道具包括类名QQ大小控制来处理额外的造型.

## 外部项目的地方用途

链接您的依赖性 :

```sh
[@coorpacademy-components] > npm link
[your-app] > npm link @coorpacademy/components
```

构建修改 :

```sh
[@coorpacademy-components] > npm run build:es
```

## 用于移动应用程序

运行 `npm run build:watch` 更多信息请参看 [移动文档](https://github.com/CoorpAcademy/mobile/blob/master/docs/local-sync.md)

您可能需要根据您使用的本地组件安装这些可选的 lib :

-   `colorjs.io`
-   `react-native-modal`
-   `react-native-render-html`
-   `react-native-linear-gradient`
-   `@coorpacademy/react-native-slider`
-   `@react-native-community/blur`

## 用色谱进行视觉测试

我们用 [色谱](https://www.chromatic.com/) 用于视觉回归测试。 这有助于捕捉UI变化,确保各组成部分的一致性.

### 设置

1.  复制实例环境文件 :
    
    ```sh
    cp .env.example .env
    ```
    
2.  将您的 Chromatic 项目符号添加到 `.env` 文件 :
    
    ```sh
    CHROMATIC_PROJECT_TOKEN=your_token_here
    ```
    
3.  运行色谱 :
    
    ```sh
    npm run chromatic
    ```
    

这将构建你的故事本,并上传到Chromatic进行视觉测试.

## 解决问题

尝试启动故事本时出错 :

尝试删除您的 `node_modules`,转到项目的根并启动: `yarn`

## 生成 Bundle 分析器报告

为了检查捆绑的内容 并优化它,如果需要,我们设置 `webpack-bundle-analyzer`,生成一个捆绑的分析报告。 以可交互放大的树图可视化 Webpack 输出文件的大小 . 要产生它,只是运行 `npm run build:stats`。 。 。 .

![Webpack Bundle Analyzer Report](https://npmcn.com/package/%40coorpacademy/components/doc/Webpack-Bundle-Analyzer-Report.png)

## 常见问题

### @coorpacademy/components 是什么？

这个库为网络应用程序提供可修饰的组件,或者:

### 如何安装 @coorpacademy/components？

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

### @coorpacademy/components 支持 TypeScript 吗？

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

### @coorpacademy/components 支持 ESM 还是 CommonJS？

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

### @coorpacademy/components 需要什么版本的 Node\.js？

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

### @coorpacademy/components 可以商用吗？

@coorpacademy/components 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @coorpacademy/components 的下载量有多少？

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

### @coorpacademy/components 还在维护吗？

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