yunjv-micro-frontends-master-base v0.1.2

项目结构

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

如何开发模板

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

ejs 说明

ejs 详细使用说明参考ejs 中文 或者 ejs 官网

命令行交互

推荐使用inquirer自定义命令交互, 详细说明inquirer

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

import inquirer from "inquirer";
import { TemplateBase, TemplateCopyHandler } from "yunjv-micro-frontends-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自定义逻辑;

import inquirer from "inquirer";
import { TemplateBase, TemplateCopyHandler } from "yunjv-micro-frontends-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/micro-{xxx} 或 @ks-dilu/master-{xxx};

第一步：安装yunjv-micro-frontends-cli， 如有可以跳过

npm install -g yunjv-micro-frontends-cli

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

npm install -g @ks-dilu/micro-test

第三步：运行 dilu

dilu create

根据提示即可完成；

API

write

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

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".