SuperAPI AI 工具集

opendesign-scripts

设计与创作

查看项目

更新于 10-16 01:06

技能介绍

用途:@opensig/open-scripts 是 OpenDesign 生态的 CLI 构建工具包,提供从 SVG 图标生成到组件库打包的构建能力,对应版本 v1.0.6,最低依赖 ≥1.0.6。

安装:pnpm add -D @opensig/open-scripts(或 npm install -D @opensig/open-scripts),安装后可在 package.json scripts 中使用 open-scripts 命令。

主要能力(5 个命令):gen:icon 将 SVG 按 fill/stroke/color 分类,经 SVGO 优化后生成 Vue 单文件图标组件;clean:svg 用 SVGO 批量清理优化 SVG;build:component 用 Vite 构建组件库,输出 ES/CJS/UMD 及类型声明;build:style 将 SCSS 编译为 CSS 产物;gen:token 从 JSON 设计令牌生成多主题 CSS 变量与 VS Code 代码片段。

使用方式:gen:icon、clean:svg、gen:token 通过 --config 指定配置文件,如 open-scripts gen:icon --config ./icons/icon.config.ts;build:component 与 build:style 不接受配置文件,直接在组件库包根目录执行。组件库发布标准顺序为 gen:icon → build:component → build:style。

适用场景:组件库开发使用全部 5 个命令;业务项目通常只需 gen:icon(自定义图标)与可选的 clean:svg,直接安装 @opensig/opendesign 与 @opensig/opendesign-token 即可,无需自行构建。

限制与注意:gen:icon 每次执行会清空输出目录并重新生成全部组件,应在 SVG 导出完毕后统一运行;新增图标采用增量策略,修改图标就地替换同名文件;所有输出目录为自动生成产物,需加入 .gitignore;monorepo 中各子包应使用不同 prefix 避免命名冲突;build:component/build:style 要求项目已具备组件库源码结构,缺失时不应创建空目录。具体命令 API 的版本变更需查阅 ReleaseNote。