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
项目的基本使用教程,涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对您有所帮助!