npm package: @ks-dilu/cli-template-micro-base
Description: 的卢微前端基础React子应用模板
Latest version: 0.1.0-beta.0

## 项目结构

```
├── template //模板目录，你需要将你的模板添加到这个目录下；
└── src
    └── index.tsx // 模板处理器
├── debug.js // 调试入口
```

## 如何开发模板

template 目录下存放你的模板目录或文件，文件支持 `ejs` 的语法，`ejs`的变量通过`模板处理器`注入；

### ejs 说明

`ejs` 详细使用说明参考[ejs 中文](https://ejs.bootcss.com/) 或者 [ejs 官网](https://ejs.co)

## 命令行交互

推荐使用`inquirer`自定义命令交互, 详细说明[inquirer](https://www.npmjs.com/package/inquirer)

如何将命令行中用户的输入注入到模板中，可以在 src/index.tsx 中的 `initTemplateVars` 实现, `initTemplateVars`的返回值将自动注入到模板中；

```typescript
import inquirer from "inquirer";
import { TemplateBase, TemplateCopyHandler } from "@ks-dilu/cli";

export class Template extends TemplateBase {
  constructor(source: string) {
    super(source);
  }
  /**
   * 如果需要通过命令行问答方式向模板需要注入一些数据，可以在initTemplateVars中定义;
   * 推荐使用inquirer
   * @returns {}
   */
  async initTemplateVars(): Promise<Record<any, any>> {
    const scaffoldType = "master";
    const answer = await inquirer.prompt([
      {
        name: "name",
        type: "input",
        message: `模板名称(格式:dilu-${scaffoldType}-{name})`,
        validate(input) {
          let nameRegExp: RegExp = new RegExp(`^dilu-${scaffoldType}`);
          if (!nameRegExp.test(input)) {
            return `必须符合格式要求：dilu-${scaffoldType}-{name}`;
          }
          return true;
        },
      },
      {
        name: "description",
        type: "input",
        message: `描述(description)`,
        validate(input) {
          if (!_.trim(input)) {
            return "必填项";
          }
          return true;
        },
      },
    ]);

    return { ...answer, scaffoldType };
  }
  /**
   * 定义如何生成模板，如果需要可以使用该方法，否则忽略就可以
   * 建议使用提供的this.write方法定制如何复制template;
   */
  // getTemplateCopyHandler(): TemplateCopyHandler {
  //   return (dest: string, vars: Record<any, any>) => {};
  // }
}
```

## 如何自定义模板生成逻辑

dilu 默认会将 template 目录中的所有文件复制到`当前目录/{projectName}`下，但是空目录会被忽略;

通过`getTemplateCopyHandler`自定义逻辑;

```typescript
import inquirer from "inquirer";
import { TemplateBase, TemplateCopyHandler } from "@ks-dilu/cli";

export class Template extends TemplateBase {
  constructor(source: string) {
    super(source);
  }
  /**
   * 如果需要通过命令行问答方式向模板需要注入一些数据，可以在initTemplateVars中定义;
   * 推荐使用inquirer
   * @returns {}
   */
  async initTemplateVars(): Promise<Record<any, any>> {
    return {};
  }
  /**
   * 第一种，直接返回一个函数
   * 建议使用提供的this.write方法定制如何复制template;
   */
  getTemplateCopyHandler(): TemplateCopyHandler {
    return (dest: string, vars: Record<any, any>) => {
      this.write(
        {
          glob: "**/xx",
          options: {
            cwd: this.source,
            cwdbase: true,
            dot: true,
          },
        },
        dest,
        vars
      );
    };
  }
  /**
   * 第二种，返回对象，分类定制模板拷贝逻辑
   */
  getTemplateCopyHandler(): TemplateCopyHandler {
    return {
      default: async (dest: string, vars) => {
        this.write(
          {
            glob: "**",
            options: {
              cwd: this.source,
              cwdbase: true,
              dot: true,
            },
          },
          dest,
          vars
        );
      },
      createTemplateDir: async (dest: string, vars: Record<any, any>) => {
        await mkdirp(path.join(dest, "template"));

        log.success(chalk.green(`   create ${vars.name}/template`));
      },
    };
  }
}
```

## 如何调试

第一步：

```
npm run dev
```

第二步：

```
cd demo
npm install
```

剩下的既可以按照你设计模板，确定模版是否正确了

## dilu 中如何使用该模板

模板开发完成后，必须发布 `@ks-dilu/cli-template-micro-{xxx}` 或 `@ks-dilu/cli-template-master-{xxx}`;

第一步：安装@ks-dilu/cli， 如有可以跳过

```
npm install -g @ks-dilu/cli
```

第二步：安装你的模板，eg: @ks-dilu/cli-template-micro-test

```
npm install -g @ks-dilu/cli-template-micro-test

```

第三步：运行 dilu

```
dilu create
```

根据提示即可完成；

## API

### write

- 描述： 基于 vinyl-fs 封装了模板复制文件的逻辑；
- 参数说明

| 参数      | 类型   | 描述                |
| --------- | ------ | ------------------- |
| gloConfig | IGlob  | vinyl-fs 的参数配置 |
| dest      | string | 目标目录            |
| vars      | object | 模板中的变量        |

```typescript
this.write(
  {
    glob: "**/xx",
    options: {
      cwd: this.source,
      cwdbase: true,
      dot: true,
    },
  },
  dest: "./demo",
  vars: {
    name: 'kwai'
  }
);
```

## 注意事项

模板中的 ejs 标签必现成对出现，否则会运行报错，提示`Could not find matching close tag for "xx".`