# 主题配置 CLI

主题配置相关的命令行工具 🔧。

## 开始

安装：

```bash
tnpm i fusion-theme-config --save-dev
```

配置 `package.json` 脚本命令：

```json
"scripts": {
  // ...
  "theme": "theme-scripts start --env=mobile",
  "theme:build": "theme-scripts build --env=mobile",
  "theme:publish": "theme-scripts publish --name=meet",
  // ...
}
```

## 用法

### `start` 命令

本地启动主题配置服务，用于组件库本地开发调试主题配置页面及配置变量。目前只支持 mobile 端的配置。关于配置页面的书写和相关配置，可见：https://yuque.antfin.com/fusion-design-system/fusion-design/gapznv

### `build` 命令

用于构建主题配置文档，目前只支持 mobile 端，构建之后发布到 npm 之后，即可发布到平台上。

### `publish` 命令

参数 `name` 可选值 `meet`, `next`。

`next` 组件一般通过 github 的 webhook 接口自动在组件库发布新版本的时候自动触发入库接口，不过如果需要更新日常环境或者需要发布 beta 版本，则可以通过该命令行进行发布。

`meet` 组件暂时没有 webhook 入库方式，必须需要通过该命令进行入库。

## 代码

```shell
.
├── package.json
├── bin                             // 命令入口
├── plugin                          // postcss 插件
    ├── postcss-replace-selector.js // 样式 selector 替换插件
    ├── postcss-rpx-to-px.js        // rpx 转 px 插件
├── scripts                         // 脚本
    ├── build                       // 构建脚本
    ├── publish                     // 发布脚本
    ├── start                       // 配置页启动脚本
├── share                           // 公共方法
└── src
    ├── common
        ├── comment-parser          // 样式注释解析
        ├── css-shorthand-expand    // 样式简写展开逻辑
        ├── css-variables-extract.js  // css 变量抽取逻辑
    ├── component                     // 组件
      ├── Color                       // 颜色选择组件
      ├── ConfigEditor                // 配置面板
      ├── ConfigItem                  // 配置项
      ├── Device                      // 设备样式：废弃
      ├── ShadowEditor                // 阴影编辑器
    ├── template                      // 页面模板
    ├── test                          // 测试用例
    ├── README.md
    └── build.js                      // 构建脚本
```

### 开发调试

1. 本地测试

```shell
npm run test
```

或

```shell
npm run dev
```

2. 通过 link 命令

- 在当前仓库运行

```
tnpm link
```

- 打开 [meet](git@gitlab.alibaba-inc.com:fusion-mobile/meet.git) 项目

```
tnpm uninstall fusion-theme-config && tnpm link fusion-theme-config
```