npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

yunjv-micro-frontends-master-base

v0.1.2

Published

test-master-base

Downloads

2

Readme

项目结构

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