@ a- little-world/ little-world-设计系统核心
小世界设计系统的核心设计标志,公用事业,以及共享类型.
安装
pnpm add @a-little-world/little-world-design-system-core
使用量
import { colors, spacing, typography } from '@a-little-world/little-world-design-system-core';
// Use design tokens
const styles = {
backgroundColor: colors.primary,
padding: spacing.medium,
fontSize: typography.body.fontSize,
};
设计托肯斯
核心一揽子计划提供:
- 颜色 - 初级、二级和语义色彩调色板
- 类型 - 字体家庭、大小、重量和行高
- 间距 - 一致的间隔尺度
- 断点 - 响应性设计断点
- 阴影 - 高度和阴影定义
- 边框半径 - 一致的边界半径值
字体
字体二进制 src/fonts/ 从 src/fonts/index.ts类型脚本编译 没有 复制 .ttf 文件输入 dist/;一个单独的复制步骤运行在建筑的末尾,因此所发布的包包括所编集的JS旁边的字体文件.
建设管道
这个 build 脚本运行, 顺序 :
clean— 删除dist/生成.d.ts文件在src/preprocess-svgs——处理 SVG 资产(与字体无关)build:esm编号 :build:cjs——编译类型脚本到dist/esm财务报告和审定财务报表dist/cjs(包括fonts/index.js,但不包括.ttf二进制)copy-fonts——将字体文件复制到两个输出树上
copy-fonts 用途 cpy-cli 与 --flat,因此每个文件直接在 dist/esm/fonts/ 财务报告和审定财务报表 dist/cjs/fonts/ (没有嵌入源路径):
copy-fonts:esm → dist/esm/fonts/
copy-fonts:cjs → dist/cjs/fonts/
已复制文件( 必须匹配文件名 ) src/fonts/:
SignikaNegative-Variable.ttfSignikaNegative-Bold.ttfDMSans-Variable.ttf
如果添加或重命名字体文件,则更新 copy-fonts:esm 财务报告和审定财务报表 copy-fonts:cjs 内 package.json 和路径 src/fonts/index.ts。 。 。 .
运行时输出( E)src/fonts/index.ts(中文(简体) )
字体模块从软件包条目中再导出(export * from './fonts') (中文(简体) ).
| 导出 | 目的 |
|---|---|
fontPaths | 相对路径到 .ttf 文件在 ./fonts/ ——对于从已发布的包中装入字体的网络消费者(例如. @font-face url()) (中文(简体) ). |
fontFamilies | CSS / 反应原生字体姓氏( R)Signika Negative, (中文(简体) ), DM Sans(见a/c.5/49/70,附件). |
fontFiles | 姓氏分布图 来源 require('./….ttf') 原生反应( N)expo-font 编号 : Font.loadAsync) (中文(简体) ). 内建 try编号 :catch 故网络捆绑器不能 require 二进制不会失败;在网络上, fontFiles 留下来 undefined。 。 。 . |
本地应用软件应注意使用:
import { fontFiles } from '@a-little-world/little-world-design-system-core';
if (fontFiles) {
await Font.loadAsync(fontFiles);
}
地方发展
QQ 重要: 从根来构建
总是从单列波的根来构建和发布,从不从单个包目录来构建和发布.
✅ 正确( 从根) :
pnpm build:core
pnpm --filter=@a-little-world/little-world-design-system-core publish
❌ 不正确( 从软件包目录) :
cd packages/core
pnpm run build
pnpm publish # This will break workspace dependencies!
大楼
# From root of monorepo
pnpm build:core
# Or from the core package directory
cd packages/core
pnpm run build
用原生软件包测试
运行本地测试时, 核心包会自动构建和测试 App :
# This will build both core and native packages
pnpm native:setup
发展 工作流量
- 进行修改 设计标志或公用事业
- 构建核心 - 说吧
pnpm build:core - 本地测试 - 说吧
pnpm native:setup-and-start(重建与试验) - 网络测试 - 说吧
pnpm storybook:web(如果网络组件使用核心符号)
出版
自动释放(建议)
理想的情况是,释放应自动化,并通过合并到回收品的主要分支来处理.
见 Root README 中的版本和发布部分 以获取关于使用变换器自动发布进程的详细信息.
自动工作流程将:
- 检测软件包中的版本变化
- 发布到 GitHub 软件包注册
- 创建带有更改日志信息的 GitHub 发布
- 自动处理所有出版步骤
手动发布( Fallback)
如果需要手动发布( 不推荐):
# Ensure you're authenticated to GitHub Packages
pnpm login --registry=https://npm.pkg.github.com
# Build the package
pnpm build:core
# Publish from the core package directory
cd packages/core
pnpm publish --access restricted
说明:手工出版绕过自动更改日志生成和发行管理. 尽可能使用自动进程.
类型脚本
该套件包括所有设计符号和公用事业的TypeScript定义:
import type { ColorToken, SpacingToken } from '@a-little-world/little-world-design-system-core';
// Type-safe usage
const color: ColorToken = 'primary'; // ✅ Valid
const invalidColor: ColorToken = 'invalid'; // ❌ TypeScript error
依赖关系
这个软件包有最小的依赖性来避免冲突:
typescript- 类型定义- 无运行时间依赖关系(纯设计标志和公用事业)