介绍
Broccoli 是一个快速、可靠的资源构建工具，它使用插件组合的方式对各种流程进行构建。其中 broccoli-zetzer 也是一个 Broccoli 插件，它提供了一个标准化的页面渲染流程，渲染时将 markdown 源码转换成 HTML 静态文件，并自动添加相关资源链接。
本文将为大家详细介绍如何使用 broccoli-zetzer 来处理 markdown 文件，并创建一个静态站点。
安装
在使用 broccoli-zetzer 进行项目搭建前，需要先安装相关的软件包。
npm install -g broccoli-cli npm install --save-dev broccoli broccoli-zetzer
安装完毕后，开始创建 Broccoli 的插件配置，并引导 broccoli-zetzer 进行配置的加载。
-- -------------------- ---- ------- ----- -------------- - --------------------------- ----- ------ - --- --------------------- - ------- ------- ----- - ---- ------------- --- ---------- -- -------- - -- ------- - ---展开代码
在创建的配置信息中，我们指定了源码路径为 src，输出路径为 dist，并通过 exts 参数指定了 markdown 文件的后缀为 .md，同时，我们可以通过 context 参数为渲染提供数据上下文。
参数说明
BroccoliZetzer(srcTree, options)
srcTree：必选参数，表示源码目录树。options：选填参数，表示配置选项，具体包含以下键值：output：选填参数，表示输出目录，默认为dist。exts：选填参数，表示支持的文件扩展名，默认为{hbs: 'handlebars'}。context：选填参数，表示渲染时使用的数据上下文，默认为空对象。
示例
以下是一个使用 broccoli-zetzer 的示例代码：
-- -------------------- ---- ------- ----- -------------- - --------------------------- ----- ------ - --- --------------------- - ------- ------- ----- - ---- ------------- --- ---------- -- -------- - ------ ---- - --------------- ------ ------- ------- ------------ --- --------------- -------- - --- -------------- - -------展开代码
上述代码实现了一个将 markdown 编译为静态 HTML 页面的 Broccoli 插件。它会从文件系统中读取 src 目录下的 .md 文件，并通过 BroccoliZetzer 将其转换为静态页面输出到 dist 目录下。
总结
在本文中，我们详细介绍了 npm 包 broccoli-zetzer 的使用方法，覆盖了安装、配置、使用等方面。同时，通过示例代码的演示，我们也可以了解到如何正确地为 Broccoli 配置一个 markdown 编译的插件。希望本文能够对前端开发者有所指导与帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde51b6
