AgileBuilder logoAgileBuilder
返回文档

模板制作入门

半小时学会制作 AgileBuilder 模板

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

什么是模板

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

创建第一个模板

1. 创建模板目录

mkdir my-template
cd my-template

2. 创建目录结构

my-template/
├── agilebuilder.json
├── template/
│   ├── package.json.hbs
│   ├── src/
│   │   └── index.js.hbs
│   └── README.md.hbs
└── hooks/
    └── post-generate.js

3. 创建模板配置

{
  "name": "my-template",
  "version": "1.0.0",
  "description": "我的第一个模板",
  "variables": [
    {
      "name": "projectName",
      "type": "string",
      "description": "项目名称",
      "required": true
    },
    {
      "name": "useTypeScript",
      "type": "boolean",
      "description": "是否使用 TypeScript",
      "default": false
    }
  ]
}

4. 创建模板文件

template/package.json.hbs：

{
  "name": "{{projectName}}",
  "version": "1.0.0",
  "scripts": {
    "dev": "node src/index.js",
    {{#if useTypeScript}}
    "build": "tsc"
    {{/if}}
  }
}

template/src/index.js.hbs：

// {{projectName}} 项目入口
console.log('Welcome to {{projectName}');

{{#if useTypeScript}}
// TypeScript 配置已启用
import type { Project } from './types';
{{/if}}

5. 创建 Hook

hooks/post-generate.js：

module.exports = async (context) => {
  const { projectPath, variables } = context
  console.log(`项目已生成: ${projectPath}`)
  console.log(`项目名称: ${variables.projectName}`)
}

测试模板

本地测试

# 在项目根目录运行
agilebuilder generate ./my-template test-project

从现有项目创建

如果你有现有项目，可以快速创建模板：

agilebuilder template create ./my-existing-project --name my-template

AgileBuilder 会自动分析项目结构，创建基础模板。

模板最佳实践

1. 清晰的变量命名

// ✅ 好的命名
"projectName", "useTypeScript", "packageManager"

// ❌ 不好的命名
"pname", "ts", "pm"

2. 合理的默认值

{
  "name": "useEslint",
  "type": "boolean",
  "default": true  // 大多数项目需要 ESLint
}

3. 详细的描述

{
  "name": "apiBaseUrl",
  "type": "string",
  "description": "API 基础 URL，用于配置开发环境和生产环境"
}

下一步