### Test CLI Tool Examples Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents Examples of testing the CLI tool after installation or development. ```bash # 测试 CLI 工具 npx figma2code hello npx figma2code info ``` -------------------------------- ### Install Package Source: https://www.npmjs.com/package/%40one2x/figma2code Command to install the package using npm. ```bash npm i @one2x/figma2code ``` -------------------------------- ### Usage Scenario Examples Source: https://www.npmjs.com/package/%40one2x/figma2code Examples demonstrating common development workflows, including incremental builds, clean builds, cleaning artifacts, watching for changes, type checking, testing the CLI, and publishing. ```bash # 日常开发 - 快速增量构建 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 ``` -------------------------------- ### Install @one2x/figma2code Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents Install the package using npm. This is the first step to using the library or CLI tool. ```bash npm install @one2x/figma2code ``` -------------------------------- ### Common Usage Scenarios Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=code Examples of common development workflows including daily incremental builds, full rebuilds when issues arise, cleaning build artifacts, and monitoring file changes during development. Also includes commands for type checking before publishing. ```bash # 日常开发 - 快速增量构建 npm run build ``` ```bash # 遇到构建问题时 - 完全重新构建 npm run build:clean # 或者使用别名 npm run rebuild ``` ```bash # 只需要清理构建产物 npm run clean ``` ```bash # 开发时监听文件变化 npm run dev # 监听库文件变化 npm run dev:cli # 监听 CLI 文件变化 ``` ```bash # 发布前检查类型 npm run type-check ``` ```bash # 测试 CLI 工具 npx figma2code hello npx figma2code info ``` ```bash # 发布包 (会自动运行 build:clean) npm publish ``` -------------------------------- ### Install Type Generation Tool (Optional) Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents Install the ts-json-as-const tool globally for enhanced TypeScript support when using the CLI. ```bash # 安装类型生成工具(可选,用于更好的 TypeScript 支持) npm install -g ts-json-as-const ``` -------------------------------- ### Build All Contents (Library + CLI) Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents Run the build command for daily development. It supports incremental builds and does not clean existing artifacts, resulting in faster build times. ```bash # 运行构建命令 npm run build ``` -------------------------------- ### Build Commands for @one2x/figma2code Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=code Utilize npm scripts for building the library and CLI tool. Commands like `build`, `build:lib`, `build:cli`, and `build:clean` offer different build strategies, from incremental updates to full clean builds. ```bash npm run build ``` ```bash npm run build:lib ``` ```bash npm run build:cli ``` ```bash npm run build:clean ``` ```bash npm run rebuild ``` -------------------------------- ### Build Commands Source: https://www.npmjs.com/package/%40one2x/figma2code Commands for building the library and CLI tool. Use `build` for incremental builds, `build:clean` or `rebuild` for a full clean build, and `build:lib` or `build:cli` for specific parts. ```bash # 构建所有内容(库 + CLI) # 支持增量构建,适合日常开发使用 # 不会清理已有的构建产物,构建速度较快 npm run build # 只构建库部分 # 生成 `dist/index.js` (ES 模块) 和 `dist/index.cjs` (CommonJS 模块) # 包含完整的类型声明文件 npm run build:lib # 只构建 CLI 工具 # 生成 `dist/cli.js` 可执行文件 npm run build:cli # 完全重新构建 # 先清理所有构建产物,再重新构建 # 确保构建结果完全干净,推荐在发布前使用 npm run build:clean # `build:clean` 的别名 # 同 `build:clean`,符合社区惯例 npm run rebuild ``` -------------------------------- ### Clean and Rebuild Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents Perform a clean rebuild by first removing all build artifacts and then rebuilding. Recommended before publishing. ```bash # 完全重新构建 npm run build:clean # 或者使用别名 npm run rebuild ``` -------------------------------- ### Use Figma2Code as a CLI Tool Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=code Execute Figma2Code commands via npx for various operations. This includes displaying welcome messages, package information, and help documentation. Use the --name flag to personalize the greeting. ```bash # 显示欢迎信息和基础功能测试 npx figma2code hello npx figma2code hello --name "张三" ``` ```bash # 显示包信息 npx figma2code info ``` ```bash # 显示帮助信息 npx figma2code --help ``` -------------------------------- ### View build output structure Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=readme The directory structure generated after running the build process. ```text 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 文件 ``` -------------------------------- ### Publish Package Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents Publish the package to the npm registry. This command automatically runs a clean build before publishing. ```bash # 发布包 (会自动运行 build:clean) npm publish ``` -------------------------------- ### Use Figma2Code as a CLI Tool Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents Execute Figma2Code commands via npx for various functionalities like displaying welcome messages, package info, or help. ```bash # 显示欢迎信息和基础功能测试 npx figma2code hello npx figma2code hello --name "张三" # 显示包信息 npx figma2code info # 显示帮助信息 npx figma2code --help ``` -------------------------------- ### Build CLI Tool Only Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents Build only the CLI tool, generating the executable file. ```bash # 只构建 CLI 工具 npm run build:cli ``` -------------------------------- ### Development Watch Mode for Library Source: https://www.npmjs.com/package/@one2x/figma2code Builds the library in watch mode, automatically recompiling when file changes are detected. Ideal for active development. ```bash npm run dev ``` -------------------------------- ### Development Commands for @one2x/figma2code Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=code Use `npm run dev` for watch mode builds, which automatically recompile the library or CLI when file changes are detected. This is ideal for active development cycles. ```bash npm run dev ``` ```bash npm run dev:cli ``` -------------------------------- ### Watch Mode Build for Library Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents Enable watch mode for the library build. The library will automatically rebuild when file changes are detected. ```bash # 监听模式构建库 npm run dev ``` -------------------------------- ### Development Commands Source: https://www.npmjs.com/package/%40one2x/figma2code Commands for development that watch for file changes and automatically rebuild. Use `dev` for the library and `dev:cli` for the CLI tool. ```bash # 监听模式构建库 # 文件变化时自动重新构建库部分 npm run dev # 监听模式构建 CLI # 文件变化时自动重新构建 CLI 部分 npm run dev:cli ``` -------------------------------- ### Build Library Only Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents Build only the library part, generating ES module and CommonJS module files along with type declarations. ```bash # 只构建库部分 npm run build:lib ``` -------------------------------- ### Use Figma2Code as a Library Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents Import necessary components from the library to process Figma data. Requires Figma data as input. ```javascript import { FigmaExtractor, RawFigmaTransformer, cfs } from '@one2x/figma2code'; // 使用示例 const componentSpec = RawFigmaTransformer.toComponentSpec(figmaData); ``` -------------------------------- ### Other Development Commands Source: https://www.npmjs.com/package/%40one2x/figma2code Utility commands for cleaning build artifacts and performing TypeScript type checks. ```bash # 清理构建产物 # 删除 `dist/` 目录下的所有文件 npm run clean # TypeScript 类型检查 # 不生成文件,只检查类型错误 npm run type-check ``` -------------------------------- ### Development Watch Mode for CLI Source: https://www.npmjs.com/package/@one2x/figma2code Builds the CLI tool in watch mode, automatically recompiling when file changes are detected. Useful for CLI development. ```bash npm run dev:cli ``` -------------------------------- ### Other Development Commands Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=code Manage build artifacts and check TypeScript types with `npm run clean` and `npm run type-check`. `clean` removes the `dist/` directory, while `type-check` performs static type analysis without generating files. ```bash npm run clean ``` ```bash npm run type-check ``` -------------------------------- ### Watch Mode Build for CLI Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents Enable watch mode for the CLI build. The CLI tool will automatically rebuild when file changes are detected. ```bash # 监听模式构建 CLI npm run dev:cli ``` -------------------------------- ### Clean Build Artifacts Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents Remove all generated build files from the dist/ directory. ```bash # 清理构建产物 npm run clean ``` -------------------------------- ### TypeScript Type Checking Source: https://www.npmjs.com/package/@one2x/figma2code Runs TypeScript type checking without generating any files, useful for verifying type correctness before committing or releasing. ```bash npm run type-check ``` -------------------------------- ### TypeScript Type Checking Source: https://www.npmjs.com/package/%40one2x/figma2code?activeTab=dependents Perform TypeScript type checking without generating files. This command helps identify type errors. ```bash # TypeScript 类型检查 npm run type-check ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.