zumen 中文文档教程

Question

Zumen

Zumen 是一个命令行工具。
一个开发工具，可以根据json（或yaml）中描述的设计一次性创建一组文件

用法 使用

init 命令安装设计集。

  npx zumen@latest init

接下来，自定义设计集并运行基本命令。

  npx zumen@latest

添加 -o 选项以覆盖输出文件。
请小心，因为您手动自定义的完成文件将被恢复。

  npx zumen@latest -o

最终结构预览 “-p”选项预览最终的系统解释结构。

  npx zumen@latest -p

具体使用方法

1. 直接在项目下创建一个绘图文件（zumen.json）。
2. 在 ./zumen/* 中创建模板文件（*..ejs）
3. run command 'npx zumen@latest'

1. 绘图文件

放置绘图文件（zumen.json 或 zumen.yml、zumen.txt） yaml），描述直接在项目下创建的文件。

工程图文件内容

描述工程图文件中的文件结构。对于文件夹，在项目名称末尾添加 /；对于文件，项目名称将为“模板名称”=“文件名称”。详细信息请参见示例。 （“=”的右侧是一个字符串，稍后将在模板中使用并替换文件名中的 {name}。）

zumen.json（或 zumen.yaml、zumen.yml）

{
  "src/": {
    "components/": {
      "template01=dialogComponent": {
        "comment": "the comment"
      }
    }
  }
}

• 文件中的项目名称和值是基本上是任意的，可以在模板中扩展为ejs。 （但是，名称和路径是隐式添加的，因此即使指定它们，系统也会覆盖它们。）
• 其他详细说明请参阅“特殊功能”。
• 如何使用ejs https://ejs.co/#docs

2. 如何创建模板文件

创建绘图文件中描述的模板。模板名称是任意的，但必须与字段名称匹配。 在上面的示例中，您需要创建一个名为“template01”的模板。

template01 示例

文件名：./zumen/template01={name}.tsx.ejs

// <%= comment %>
const <%= name %> = () => {
  return (
    <div>
      I'm <%= name %>
    </div>
  );
}

• 确保文件扩展名是“.ejs”
• {name} 替换绘图文件中指定的 equals 的右侧。
• 最后用ejs编译模板。

最终交付物

src/components/dialogComponent.tsx

// the comment
const dialogComponent = () => {
  return (
    <div>
      I'm dialogComponent
    </div>
  );
}

特殊函数

值注释

如果指定“@{模板名称}”作为要展开的项的值，它将返回指定层次结构中的目标文件名列表，并将被替换为模板中的完整数组。

例如

zumen.json

{
  "src/": {
    "components/": {
      "component=DialogOpen": {
        "comment": "Dialog open button."
      },
      "component=DialogClose": {
        "comment": "Dialog close button."
      },
      "index=": {
        "brings": "@component"
      }
    }
  }
}

• 也可以像“../@component”一样设置并指定层次结构。

./zumen/index=index.ts.ejs

<%_ for (var i = 0; i < brings.length; i++) { _%>
export * from './<%= brings[i].name %>';
<%_ } _%>

通过上述设置完成的文件

./src/components/index.ts

export * from './DialogOpen';
export * from './DialogClose';

自动隐式授予的项目

可以使用文件名“name”和文件路径字符串“path”在模板中。