AgileBuilder logoAgileBuilder
返回文档

模板制作教程

快速制作项目模板，长期复用

本教程将指导你创建一个完整的项目模板，包括变量定义、条件渲染和 hooks 配置。

什么是模板

模板是一个包含项目结构、配置文件和代码的目录，通过变量和条件渲染，可以生成不同配置的项目。

模板结构

一个标准的 AgileBuilder 模板结构如下：

my-template/
├── agilebuilder.json      # 模板配置文件
├── template/              # 模板文件目录
│   ├── src/
│   ├── package.json.hbs   # 使用 Handlebars 语法
│   └── README.md.hbs
└── hooks/                 # 钩子脚本（可选）
    ├── pre-generate.js
    └── post-generate.js

配置文件

agilebuilder.json 是模板的核心配置：

{
  "name": "my-template",
  "version": "1.0.0",
  "description": "My project template",
  "variables": [
    {
      "name": "projectName",
      "type": "string",
      "description": "项目名称",
      "required": true
    },
    {
      "name": "useTypeScript",
      "type": "boolean",
      "description": "是否使用 TypeScript",
      "default": true
    }
  ]
}

变量系统

AgileBuilder 支持多种变量类型：

字符串变量

{
  "name": "projectName",
  "type": "string",
  "description": "项目名称",
  "required": true,
  "pattern": "^[a-z][a-z0-9-]*$"
}

布尔变量

{
  "name": "useTypeScript",
  "type": "boolean",
  "description": "是否使用 TypeScript",
  "default": true
}

选择变量

{
  "name": "framework",
  "type": "select",
  "description": "选择框架",
  "options": ["react", "vue", "svelte"],
  "default": "react"
}

条件渲染

在模板文件中使用 Handlebars 语法进行条件渲染：

{{#if useTypeScript}}
"devDependencies": {
  "typescript": "^5.0.0"
}
{{/if}}

下一步