Style Dictionary Utils 使用教程

Style Dictionary Utils 使用教程

style-dictionary-utilsUtilities to use in your style dictionary config项目地址:https://gitcode.com/gh_mirrors/st/style-dictionary-utils

1. 项目的目录结构及介绍

style-dictionary-utils/
├── src/
│   ├── filters/
│   ├── formats/
│   ├── transforms/
│   └── utils/
├── tsconfig.json
├── package.json
└── README.md

• src/: 包含项目的源代码，分为多个子目录：
  • filters/: 包含用于过滤设计令牌的函数。
  • formats/: 包含用于格式化输出文件的函数。
  • transforms/: 包含用于转换设计令牌的函数。
  • utils/: 包含一些通用的工具函数。
• tsconfig.json: TypeScript 配置文件。
• package.json: 项目的依赖和脚本配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件通常是 package.json 中定义的脚本。例如：

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js"
  }
}

• build: 使用 tsc 编译 TypeScript 代码。
• start: 运行编译后的 JavaScript 文件。

3. 项目的配置文件介绍

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

• target: 指定编译目标为 ES6。
• module: 使用 CommonJS 模块系统。
• outDir: 编译输出目录为 dist。
• strict: 启用所有严格类型检查选项。
• esModuleInterop: 允许使用 ES 模块语法导入 CommonJS 模块。
• include: 包含 src 目录下的所有文件。

package.json

{
  "name": "style-dictionary-utils",
  "version": "1.0.0",
  "description": "A package of transforms, formats, filters, etc to use in your style dictionary config to transform your design tokens",
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js"
  },
  "dependencies": {
    "style-dictionary": "^3.0.0"
  },
  "devDependencies": {
    "typescript": "^4.0.0"
  }
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 入口文件路径。
• scripts: 定义了一些常用的脚本命令。
• dependencies: 项目运行时的依赖。
• devDependencies: 开发时的依赖。

以上是 style-dictionary-utils 项目的基本使用教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对您有所帮助！

style-dictionary-utilsUtilities to use in your style dictionary config项目地址:https://gitcode.com/gh_mirrors/st/style-dictionary-utils