yunjv-micro-frontends-master-base

0.1.2 • Public • Published

项目结构

├── 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 封装了模板复制文件的逻辑;
  • 参数说明
参数 类型 描述
gloConfig IGlob vinyl-fs 的参数配置
dest string 目标目录
vars object 模板中的变量
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".

Readme

Keywords

Package Sidebar

Install

npm i yunjv-micro-frontends-master-base

Weekly Downloads

0

Version

0.1.2

License

MIT

Unpacked Size

28.9 kB

Total Files

19

Last publish

Collaborators

  • yunjv