辅助开发工具(UMI UI) - @zebrateam/auto-complate-color-variable - 《Zebra React Umi最佳实践》

业务背景
支持特性
快速集成
FAQ
- Q：在执行自动提取变量命令以后可以先更替颜色变量值在去执行批量替换的命令吗？
- Q：在批量替换后发现add-prefix中有一些无用的层级，会有影响吗？

auto-complate-color-variable插件可以快速的帮您在项目中替换颜色值为预定义的变量，目前支持 Less 和 Sass，支持批量替换多个文件及缺失定义变量检测并自动创建。

业务背景

在项目开发过程中，或者进入不断迭代的周期时，项目组会收到各式各样的新需求，其中多主题、多语言尤为突出，在已开发的项目基础上支持多主题或者语言，意味着改动的工作量巨大，而且特别麻烦容易出现纰漏，所以在此业务背景场景下，我们提炼出auto-complate-color-variable插件，可以自动快速的来检测项目中的颜色并且预定义颜色变量统一管理，这样更方便快捷安全性高，同时我们支持了一键替换多个文件，让您可以轻松快速的应对需求。

支持特性

@link-color: #0a1;

输入

.foo {
    color: #0a1;
    background: rgb(170, 170, 170);
    border: 1px solid rgba(170, 170, 170, 0.1);
}

输出

.foo {
  color: @link-color;
  background: @link-color;
  border: 1px solid fade(@link-color, 10%);
}

快速集成

安装依赖

我们的插件包现阶段需要nrm源切换到taobao源进行下载。

检查nrm源链接

nrm ls

设置nrm源为taobao源

nrm use taobao

接下来执行以下命令安装插件依赖

npm install @zebrateam/auto-complate-color-variable -g || yarn add @zebrateam/auto-complate-color-variable -g

备注：下载完安装包记得切换回nrm源到公司内网哦。

配置变量

需要在项目根目录创建文件.colorvarrc.json：

{
  "variableFiles": ["./config/theme.less"],
  "syntax": "less",
  "autoImport": true,
  "alias": {
    "@": "./config" 
  },
  "base": "src/pages",
  "autoComple": true,
  "usingAlias": "@", 
  "singleQuote": false,
  "supportCssTpl": true
}

.colorvarrc.json支持配置项详解：

参数	描述	类型	默认值
variableFiles	定义颜色变量的文件路径	Array	[]
syntax	语法，支持 less 和 scss	String	‘less’
autoImport	是否自动导入依赖的variableFiles	Boolean	false
alias	等同于 webpack 中的alias	Object	{}
base	基础路径，modules匹配时扫描进入目录	String	‘’
autoComple	是否自动补全缺失color变量， checkMode为‘1’时有效	Boolean	false
usingAlias	自动导入 variableFile 时，使用 alias ，例如 @import ‘~@/src/color.less’	String	‘’
singleQuote	自动导入时是否使用单引号，默认 false	Boolean	false
checkMode	是否为检测模式，为‘1’时，只检测缺失定义color变量	Boolean	‘0’
cssTplPath	转换color为变量，提取支持多主题模版的路径（可以根目录相对路径文件）	String	‘./template/less.tpl’
supportCssTpl	是否选择css模版来转换样式	Boolean	false
prettyCss	是否美化代码	Boolean	true

添加命令行

需要在项目根目录下的package.json目录中的scripts下添加命令：

# 检测模式，如果autoComple为true，则变量定义文件自动创建缺失变量 
"auto:complate:color": "pcvar --m \"**/*.less\" --c=1"
# 批量转换多文件 
"auto:transition:color": "pcvar --m \"**/*.less\""

备注:命令名称可以自定义。

项目实操

通过上述三步，您已成功在项目中集成了auto-complate-color-variable插件，接下来在项目中运行命令：

第一步：执行命令auto:complate:color。
```
yarn auto:complate:color || npm run auto:complate:color
```
上述命令运行完后，可查看colorvarrc.json文件中的配置项variableFiles设置对应的目录路径下是否生成存放颜色变量的文件，此时插件已经把项目中所有颜色相关提取成变量写在对应的文件中了，并且标注了更改的文件路径。如图：
第二步：执行命令auto:transition:color。
```
yarn auto:transition:color || npm run auto:transition:color
```
上述命令运行完后，在项目中的对应颜色会替换成颜色变量形式，并且插件会按照多主题的业务变量提取规范，按照规范模板，自动把颜色相关类提取到add-prefix方法中，且自动添加执行.generator-themes方法。如图：

FAQ