# @atomic-layout/core 中文文档

规范地址：https://npmcn.com/package/%40atomic-layout/core/

版本：0\.14\.1
npm 元数据更新时间：2022-04-04T16:14:38.483Z
中文译文更新时间：2026-11-07T03:25:11.246Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40atomic-layout/core
原文对照：https://npmcn.com/package/%40atomic-layout/core/?lang=original
源码仓库：https://github.com/kettanaito/atomic-layout/tree/master/packages/atomic-layout-core

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

- 包体积（解压后）：64 kB，80 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2019-12-06T11:31:28.541Z
- 最新版本发布：2020-04-24T11:01:05.971Z
- 近 30 天下载量：7881（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 0 个）

## 中文简介

原子 布局核心模块

## 安装

```sh
npm install @atomic-layout/core
```

也可以使用：`pnpm add @atomic-layout/core`、`yarn add @atomic-layout/core`、`bun add @atomic-layout/core`

## README

[![Package version](https://img.shields.io/npm/v/@atomic-layout/core.svg?color=%237B85FF)](https://npmjs.com/package/@atomic-layout/core)

# `@atomic-layout/core`

[原子布局](https://github.com/kettanaito/atomic-layout) 核心图书馆.

> **请注意, 作为原子布局的用户, 您不应该在应用程序中直接使用此包 .** 它充当了各种渲染执行的逻辑抽象(有风格组件,情感等). 如果您计划引入原子布局的新样式执行, 请使用此套件 .

## 动机

原子布局在单独的模块中包含其核心功能,以便再用于各种型式执行(`styled-components`, (中文(简体) ), `emotion`(见A/C.5/49/70,附件)。 这个模块中分布的逻辑是风格-不可知性的,主要涉及库所使用数据结构的计算和转换. 它还提供了供原子布局或其消费者使用的常见类型定义.

## 范围

原子 布局核心在以下范围内运作:

### 布局界面

-   `Layout` 实例,由每个执行图书馆时的单个格式所显示
-   用于消费布局选项的接口( E)`defaultUnit`, (中文(简体) ), `breakpoints`页:1
-   用于存储和引用所提供的选项的接口

### 断点转换

-   断点解析( T)`getAreaRecords`(中文(简体) )
-   断点转换( C)`mergeBreakpoints`, (中文(简体) ), `openBreakpoint`, (中文(简体) ), `closeBreakpoint`(中文(简体) )
-   中断点汇编( E)`createMediaQuery`(中文(简体) )

### 媒体查询处理

-   媒体问询的正常化`normalizeMediaQuery`(中文(简体) )

### 公用事业

-   串接公用事业(即:. `toCammelCase`, (中文(简体) ), `toLowerCaseFirst`(中文(简体) )
-   数学公用事业(即:. `transformNumeric`(中文(简体) )
-   职能公用事业(即:. `compose`, (中文(简体) ), `when`, (中文(简体) ), `memoizeWith`(中文(简体) )

## 类型定义

> 参考完整类型定义模块 `atomic-layout/core/lib/index.d.ts`。 。 。 .

访问此套件导出的类型时常用的大小写是,为您自定义的 React 组件提供合适的类型注释,这些组件接受与库组件相同的道具( )`Box`, (中文(简体) ), `Composition`, (中文(简体) ), `Only`(见a/c.5/49/70,附件).

以下是一个实例,说明如何将自定义的回放组件接收所有道具 `Box` 组件有:

```tsx
import * as React from 'react'
import { BoxProps } from 'atomic-layout/core'

const MyComponent: React.FC<BoxProps & MyComponentProps> = ({
  children,
  ...boxProps
}) => {
  return <Box {...boxProps}>{children}</Box>
}
```

## 捐款

### 叉子存储器

用右上方的"Fork"按钮叉出此寄存器 [仓库页面](https://github.com/kettanaito/atomic-layout/tree/master/packages/atomic-layout-core)。 。 。 .

### 跟随 Git 工作流程

请跟随 [Git 工作流程](https://github.com/kettanaito/atomic-layout/blob/master/.github/CONTRIBUTING.md#git-workflow) 在对原始图书馆的捐款准则中说明.

## 许可证

麻省理工学院.

## 常见问题

### @atomic-layout/core 是什么？

原子 布局核心模块

### 如何安装 @atomic-layout/core？

在项目目录运行 npm install @atomic-layout/core，或使用 pnpm add / yarn add / bun add。

### @atomic-layout/core 支持 TypeScript 吗？

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

### @atomic-layout/core 支持 ESM 还是 CommonJS？

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

### @atomic-layout/core 可以商用吗？

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

### @atomic-layout/core 的下载量有多少？

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

### @atomic-layout/core 还在维护吗？

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