前言

因为目前有时间了，所以在整理一下自己这几年写过的一些东西的相关文档，准备把一些东西改一下发出来，有的内容可能并不复杂，甚至有点浅显，但是也是对自己这几年的一些复盘和总结了

如果有需要，转载前请向我确认

需求背景

因为接到一个需求需要统一原有项目的所有样式规范，包括了颜色、线条、字体大小等很多东西 关于这个我们新增和维护了一个 less 的 token 映射文件来进行管理 但是因为这些样式并不是所有都写在less或者css文件内的 例如 chart 的一些样式，或者有些只能用行内样式解决的场景 但是原有项目已经迭代了好几年，所以会存在非常多的这类场景，但是如果我们将less的那套文件再写一份 js 的，就实在不太优雅了，所以我这边期望的就是将当前less这套变量转成json挂在全局上，可以在需要的时候直接使用

解决思路

方案一

1. 将当前主题色变量的less文件转为 json 或者 js对象，将现有项目中使用行内样式或者颜色参数的地方替换掉
2. 考虑生成方式和时机 a. 使用时转换。 （每次有相关都需要读取文件，不合理） b. 在项目编译前读取 目标 less文件进行转换，挂载在全局中 （可以考虑在自定义plugin这种实现, 最后发现没啥必要） c. 在编译后进行转换挂载。（因为未使用变量会被优化，在自定义loader中能拿到的结果发现未使用的定义变量都被吞了）
3. 转换方式实现思路 a. 通过传入目标文件url读取目标文件内容 b. 去除文件内部注释等代码不相关的杂物 c. 分析less的声明结构 d. 对声明进行拆解解析成键值对 e. 对同一文件内的变量互相调用进行替换 f. 去除可能会出现的空格导致转换出来的json数据不正确 g. 提供可是否除less变量前符号的选项 h. 考虑less中可能存在的复杂的变量匹配，例如函数调用，或者属性的值是一个less或者css方法的问题，例如 fade(@color-gray-10, 10%) ，或者值中的方法有多个变量的情况
4. 挂载方式 a. 通过自定义plugins挂在在全局中 （事实证明不需要） b. 在编译前生成读取后挂载在global中，然后在模版文件中下发到前端 c. 通过webpack.DefinePlugin替换挂载在全局变量中，例如挂载在window中
5. 代码提示 a. 考虑在编译完成后，对生成的对象或者json数据，在golbal.d.ts的同级目录下生成 .d.ts文件，以支持ts提示 ，但是经过讨论和考虑，每次编译过程都需要进行读写文件的操作，成本过高，并且ts提示意义不大，因为即使有ts提示，也没办法得知对应颜色是什么，最终还是要从设计稿中拷贝对应的token值

方案二

使用 babel 在编译阶段将指定字符串转为css变量

但是经过考虑，方案一其实和方案二是一样的，都是需要进行解析，所面临的问题也是一样的，只不过是解析的阶段不一样而已 方案二相对来说更不可控，并且需要考虑ast处理中的很多的边界问题 而方案一相对来说比较容易理解和维护，所以最后决定使用方案一

实现结果

转换结果

代码实现

这里参考了某个开源项目，但是因为太久远，我忘了是哪个了

同一文件内的变量互相调用进行替换实现逻辑

通过正则匹配 @ 符号后的单词，然后检测是否可以匹配到，如果匹配到则搜索全部的键，如果存在符合的键则对其中的值进行替换，否则替换成一个默认值

替换完后再次对这一项进行重复逻辑，直到这一对键值对中的值不再存在符合正则匹配的条件，从而 less 中 复杂变量的值替换

挂载方式

结果

代码内调用方式

window.themeColor['color token']