AgileBuilder logoAgileBuilder
返回文档

模板高级功能

掌握 AgileBuilder 模板的高级技巧

概述

本篇介绍 AgileBuilder 模板的高级功能，帮助你创建更复杂、更灵活的模板。

高级变量

变量继承

子模板可以继承父模板的变量：

{
  "extends": "./base-template",
  "variables": [
    {
      "name": "projectName",
      "inherit": true
    },
    {
      "name": "customVariable",
      "type": "string"
    }
  ]
}

计算变量

基于其他变量计算得出的变量：

{
  "variables": [
    {
      "name": "projectName",
      "type": "string"
    },
    {
      "name": "outputDir",
      "type": "computed",
      "compute": "src/{{projectName}}"
    }
  ]
}

变量验证

{
  "name": "projectName",
  "type": "string",
  "required": true,
  "pattern": "^[a-z][a-z0-9-]*$",
  "patternMessage": "项目名称必须以字母开头，只包含小写字母、数字和连字符"
}

复杂条件渲染

多条件组合

{{#if useTypeScript}}
{{#if useEslint}}
{
  "typescript": "^5.0.0",
  "eslint": "^8.0.0"
}
{{/if}}
{{/if}}

if-else 条件

{{#if_eq framework "react"}}
{
  "dependencies": {
    "react": "^18.0.0"
  }
}
{{else}}
{
  "dependencies": {
    "vue": "^3.0.0"
  }
}
{{/if_eq}}

循环和嵌套

嵌套循环

{{#each modules}}
- {{name}}:
  {{#each files}}
  - {{this}}
  {{/each}}
{{/each}}

循环索引

{{#each features}}
{{#if @first}}
第一个功能: {{this}}
{{/if}}
索引: {{@index}} - {{this}}
{{/each}}

内置 Helpers

if_eq

{{#if_eq version "1.0.0"}}
版本是 1.0.0
{{/if_eq}}

unless_eq

{{#unless_eq environment "production"}}
开发环境专用配置
{{/unless_eq}}

includes

{{#if (includes tags "experimental")}}
实验性功能
{{/if}}

Hooks 高级用法

异步 Hook

module.exports = async (context) => {
  const { projectPath, variables } = context

  // 异步操作
  await fs.writeFile(
    path.join(projectPath, 'generated.txt'),
    `Created at ${new Date()}`
  )
}

Hook 链

{
  "hooks": {
    "post-generate": [
      "@agilebuilder/install-deps",
      "node hooks/setup-eslint.js",
      "node hooks/setup-prettier.js",
      "node hooks/init-git.js"
    ]
  }
}

模板片段

公共片段

创建可复用的模板片段：

template/
├── _header.hbs      # 公共头部
├── _footer.hbs      # 公共尾部
├── component.hbs
│   {{> _header}}
│   <h1>{{title}}</h1>
│   {{> _footer}}

使用片段

{{> header title="Hello"}}
<p>内容</p>
{{> footer}}

性能优化

大型模板建议

  1. 减少嵌套层级 - 避免过深的目录结构
  2. 使用 .gitignore - 排除不需要的文件
  3. 压缩资源文件 - 减小模板体积
  4. 缓存依赖 - 减少重复下载

下一步