Style Dictionary配置方式解析：JS与JSON配置的区别

在使用Style Dictionary构建设计系统时，开发者可能会遇到配置方式选择的问题。最近有用户反馈在使用JavaScript配置文件时遇到了Cannot read properties of undefined (reading 'log')的错误，这实际上反映了对Style Dictionary两种不同运行方式的理解偏差。

两种配置运行方式的本质区别

Style Dictionary提供了两种主要的使用方式，它们有着本质的不同：

1. CLI命令行方式：通过npx style-dictionary build命令直接运行，适合简单的构建场景
2. Node.js API方式：通过JavaScript代码调用Style Dictionary的API，适合需要编程式控制的复杂场景

错误原因分析

用户遇到的错误是因为混合了这两种方式。当使用npx style-dictionary build --config styledictionary.js命令时，系统期望的是一个纯粹的配置文件，而不是一个执行脚本。而用户提供的JavaScript文件实际上是一个执行脚本，它已经包含了API调用。

正确使用方式

纯JSON配置方式

如果选择使用JSON配置文件（如config.json），可以直接通过CLI命令运行：

npx style-dictionary build --config config.json

这种方式简单直接，适合大多数基础使用场景。

JavaScript API方式

如果需要更灵活的控制，应该完全使用Node.js API方式：

1. 创建执行脚本（如styledictionary.js）：

import StyleDictionary from "style-dictionary"

const sd = new StyleDictionary("config.json")
await sd.buildAllPlatforms()

2. 直接通过Node运行该脚本：

node styledictionary.js

进阶建议

对于复杂项目，可以考虑以下优化：

1. 动态配置生成：利用JavaScript的动态特性，根据环境变量生成不同的配置
2. 自定义转换器：在JavaScript配置中可以更方便地添加自定义转换逻辑
3. 构建流程集成：将Style Dictionary构建流程集成到更大的构建系统中

总结

理解Style Dictionary两种配置方式的区别对于正确使用该工具至关重要。JSON配置适合简单场景，而JavaScript API方式提供了更大的灵活性。开发者应根据项目需求选择合适的配置方式，避免混合使用导致的问题。