tkit-cli

强大且简单易用的组件生成工具

安装

``bash
$ npm i -g @chshouyu/tkit-cli
`

使用

本工具采用交互式的使用方式

!TbSOhr.e30d0ce9

命令

_以下以 {work_dir} 代表当前的执行目录_

$3

目前可以添加三种不同类型的组件，区别如下

| 组件类型 | 说明 | 注意 |
| --------- | -------------------------------------------------------- | ---------------------------------------- |
| component | 在某个 feature 下面生成一个组件，需要先指定 feature 名称 | 组件名称会自动首字母大写 |
| page | 在某个 feature 下面生成一个页面，需要先指定 feature 名称 | 页面名称会自动首字母大写并追加 Page 后缀 |
| custom | 在某个路径下面生成一个组件，需要先指定自定义路径 | 组件名称会自动首字母大写 |

#### component 举例

!component2.a2070015

默认生成的组件路径为 {work_dir}/src/features/{ featureName }/components/{ componentName }/{ componentName }.tsx

#### page 举例

!page.39328501

默认生成的页面路径为 {work_dir}/src/features/{featureName}/{componentName}.tsx

#### custom 举例

!custom.91e98023

默认生成的组件路径为 {work_dir}/{customComponentPath}/{componentName}/{componentName}.tsx

配置

如果默认生成的文件路径以及默认模板内容不满足需求，可以自定义配置，结合自定义路径和自定义模板，可以在项目中任意路径生成任意内容的组件

配置文件路径：~/.config/tkit-cli/config.json（如果不存在则新建一个）

$3

默认配置

`json
{
"featureBasePath": "src/features",
"normalComponentPath": "{{ featureName }}/components/{{ componentName }}/{{ componentName }}.tsx",
"normalComponentStylePath": "{{ featureName }}/components/{{ componentName }}/{{ componentName }}.{{ cssPreProcessors }}",
"pageComponentPath": "{{ featureName }}/{{ componentName }}.tsx",
"pageComponentStylePath": "{{ featureName }}/{{ componentName }}.{{ cssPreProcessors }}",
"customComponentPath": "{{ customComponentPath }}/{{ componentName }}/{{ componentName }}.tsx",
"customComponentStylePath": "{{ customComponentPath }}/{{ componentName }}/{{ componentName }}.{{ cssPreProcessors }}"
}
`

可以修改其中的一个或多个配置

例如，如果将 normalComponentPath 改为

{{ featureName }}/components/{{ componentName }}.tsx

则 component 生成的文件路径为：

{work_dir}/src/features/{featureName}/components/{componentName}.tsx

$3

因项目类型多种多样，强烈建议配置自定义模板

目前可以配置四种不同类型的模板

| 模板类型 | 默认模板 |
| --------------- | -------------- |
| class component | comp.class.ejs |
| sfc component | comp.sfc.ejs |
| component index | index.ejs |
| style | style.ejs |

如果某个默认模板的内容不满足当前项目需求，可以自定义模板内容

以 class component 为例：

在 ~/.config/tkit-cli 目录下新建 comp.class.ejs 文件，按照自己的项目需求修改即可，其他类型模板以此类推

注意模板采用 ejs 语法，请注意书写格式，否则会导致模板解析错误

comp.class.ejs / comp.sfc.ejs 可用变量为：

`
componentName: string;
cssPreProcessors: 'less' | 'scss' | 'none';
useRedux: boolean;
useRouter: boolean;
`

style.ejs 可用变量为：

`
componentName: string;
cssPreProcessors: 'less' | 'scss' | 'none';
`

index.ejs 可用变量为：

`
componentName: string;
``

具体写法可以参考默认模板