@one2x/figma2code

Figma2Code 核心包 - 将 Figma 设计转换为代码的工具

简介

这是一个用于将 Figma 设计稿转换为可用代码的核心库。该包提供了完整的工具链，包括：

• 🔧 核心库 - 提供 Figma 数据处理和转换功能
• 🛠️ CLI 工具 - 命令行界面，便于自动化处理

安装

npm install @one2x/figma2code

使用

作为库使用

import { FigmaExtractor, RawFigmaTransformer, cfs } from '@one2x/figma2code';

// 使用示例
const componentSpec = RawFigmaTransformer.toComponentSpec(figmaData);

作为 CLI 工具使用

# 显示欢迎信息和基础功能测试
npx figma2code hello
npx figma2code hello --name "张三"

# 显示包信息
npx figma2code info

# 显示帮助信息
npx figma2code --help

前置要求

使用 CLI 功能需要全局安装以下工具：

# 安装类型生成工具（可选，用于更好的 TypeScript 支持）
npm install -g ts-json-as-const

开发

可用脚本

构建命令

• npm run build - 构建所有内容（库 + CLI）

  • 支持增量构建，适合日常开发使用
  • 不会清理已有的构建产物，构建速度较快

• npm run build:lib - 只构建库部分

  • 生成 dist/index.js (ES 模块) 和 dist/index.cjs (CommonJS 模块)
  • 包含完整的类型声明文件

• npm run build:cli - 只构建 CLI 工具

  • 生成 dist/cli.js 可执行文件

• npm run build:clean - 完全重新构建

  • 先清理所有构建产物，再重新构建
  • 确保构建结果完全干净，推荐在发布前使用

• npm run rebuild - build:clean 的别名

  • 同 build:clean，符合社区惯例

开发命令

• npm run dev - 监听模式构建库

  • 文件变化时自动重新构建库部分

• npm run dev:cli - 监听模式构建 CLI

  • 文件变化时自动重新构建 CLI 部分

其他命令

• npm run clean - 清理构建产物

  • 删除 dist/ 目录下的所有文件

• npm run type-check - TypeScript 类型检查

  • 不生成文件，只检查类型错误

使用场景示例

# 日常开发 - 快速增量构建
npm run build

# 遇到构建问题时 - 完全重新构建
npm run build:clean
# 或者使用别名
npm run rebuild

# 只需要清理构建产物
npm run clean

# 开发时监听文件变化
npm run dev          # 监听库文件变化
npm run dev:cli      # 监听 CLI 文件变化

# 发布前检查类型
npm run type-check

# 测试 CLI 工具
npx figma2code hello
npx figma2code info

# 发布包 (会自动运行 build:clean)
npm publish

构建产物

构建完成后会在 dist/ 目录生成以下文件结构：

dist/
├── lib/                    # 库文件目录
│   ├── index.js           # ES 模块格式的库文件
│   ├── index.cjs          # CommonJS 模块格式的库文件
│   ├── index.d.ts         # 库的 TypeScript 类型声明
│   └── *.map              # Source Map 文件
└── bin/                    # CLI 工具目录
    ├── cli.js             # CLI 可执行文件
    └── cli.js.map         # CLI Source Map 文件