Plop 的 Helper 扩展

🎯 引言

学完这篇文章，你将了解 Plop 提供了哪些内置 helper，以及如何通过 plop.setHelper() 扩展自己的 helper。

Handlebars helper 的基础概念（如 helper 是什么、如何在模板中调用）请参考前面的 Handlebars 课程，本课程只讲 Plop 相关的部分。

🧱 Plop 内置的常用 helper

除了上一篇提到的命名转换 helper（camelCase、pascalCase、kebabCase 等），Plop 还提供了几个方便项目开发的 helper。

pkg

读取当前项目的 package.json 内容。

项目名：{{pkg 'name'}}
版本号：{{pkg 'version'}}

raw

输出原始内容，避免 Handlebars 解析。

{{raw}}{{name}}{{/raw}}

include

引入另一个模板片段。

{{include 'header'}}

date

输出当前日期。默认格式可能因环境而异，实际项目中更推荐用自定义 helper 固定格式。

<!-- 创建于 {{date}} -->

✨ 用 plop.setHelper 自定义 helper

Plop 通过 plop.setHelper() 注册自定义 helper，这是 Plop 独有的 API。

示例：生成固定格式的日期

export default function (plop) {
    plop.setHelper('now', function () {
        const date = new Date();
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
    });
}

模板中使用：

<!--
    组件：{{pascalCase name}}
    创建日期：{{now}}
-->

示例：接收多个参数

plop.setHelper('prefix', function (text, pre) {
    return pre + '-' + text;
});

模板中使用：

<div class="{{prefix name 'el'}}">{{name}}</div>

输入 button，会渲染成：

<div class="el-button">button</div>

🧾 小节总结

• Plop 内置了 pkg、raw、include、date 等 helper，命名转换 helper 使用最频繁。
• 通过 plop.setHelper() 可以注册 Plop 自定义 helper。
• 自定义 helper 可以接收一个或多个参数，返回字符串供模板使用。
• Handlebars helper 的基础概念请参考 Handlebars 课程，本课程不再重复。

❓ 知识问答

Q1：自定义 helper 会覆盖内置 helper 吗？

A：如果名称相同，会覆盖。所以自定义 helper 时尽量选择有项目特色的名称，避免冲突。

Q2：Plop 的 setHelper 和 Handlebars 的 registerHelper 有什么区别？

A：功能类似，但 setHelper 是 Plop 封装的 API。在 Plop 项目中推荐用 plop.setHelper()，它会把 helper 注册到 Plop 的 Handlebars 实例中。

Q3：{{raw}} 有什么作用？

A：包裹在 {{raw}} 和 {{/raw}} 之间的内容不会被 Handlebars 解析，适合输出包含 {{ }} 的字符串。详细用法请参考 Handlebars 课程。

Q4：自定义 helper 可以返回非字符串值吗？

A：推荐返回字符串。如果返回其他类型，Handlebars 可能会做类型转换，结果可能不符合预期。

🧪 小练习

请编写一个名为 suffix 的自定义 helper，它接收两个参数，把第二个参数拼到第一个参数后面，用短横线连接。

例如：{{suffix name 'item'}}，输入 user 应输出 user-item。

plop.setHelper('suffix', function (text, suf) {
    // 请在这里补全代码
});

🎉 恭喜你掌握了 Plop 的 helper 扩展能力！下一篇我们会通过一个完整的实战案例，把前面学到的知识串起来。