前言
前端开发用到的模板引擎很多，Ember.js 就用了 Handlebars.js，但是 Handlebars.js 只提供了模板渲染一部分的功能，如果要使用组件的话，需要用到其子模板库 Emblem.js（Ember+crammed+HTML），而 Broccoli Emmblem Compiler Rails 可以将子模板库 Emblem.js 编译成模板可用的 Handlebars.js，从而提供更好的在前端使用子模板库 Emblem.js 的工具。
环境准备
- Node.js 环境
- 使用 broccoli.js 搭建的前端项目
安装
使用 NPM 安装 broccoli-emblem-compiler-rails：
npm install broccoli-emblem-compiler-rails
使用
在使用 Broccoli 的 Brocfile.js 中配置插件，并且设置编译后的 Handlebars.js 文件输出路径：
-- -------------------- ---- -------
----- -------------------- - ------------------------------------------
----- ------- - ----------
----- ------- - ------- - -------
----- - ------ - - --------------------------
-------------- - -------- -- -
----- --------- - --- ----------------------------- - ----------------------- -
---------- - -----------
---------- - ------ - ---------------------------
---
------ ----------
--以上配置在编译时会将 app/assets/javascripts 目录下后缀名为 .emblem 的文件全部编译成 output/javascripts/templates.js。
接下来在前端代码中引入编译后的 Handlebars.js 文件，并且使用预编译好的模板（这里示意一下）：
<script src="/assets/templates.js"></script>
<script>
var context = { name : 'world' };
var html = JST['app/views/example'](context);
console.log(html);
</script>这里要注意的是，模板文件的命名必须符合 controller/view 这样的命名规范，即 app/views/example.emblem 会预编译成 JST['app/views/example']，并且编译后的 Handlebars 模板函数会放到 window.JST 全局对象下。如果使用了 ember-cli 的话会自动帮我们处理好这些。
拓展
如果需要支持多个目录或者多个目录下的文件有不同的输出文件名的话，可以将 Broccoli 插件包装一下，下面是一个简单的示例：
-- -------------------- ---- -------
----- ---------------------- - ---------------------------------------
----- - ---- - - ----------------
----- - ------ - - ------------------------------
----- -------------- - -
------
----------
--
----- --------- - -------------------------------- -
------ --- --------------------------- -
----------- -----------
----------- ------------ -------------------- ---- ---------------------------
---
---
-------------- - ----------这样配置之后，即可支持多个目录下的 .emblem 文件编译成多个不同的 Handlebars.js 文件了。
结语
相信通过本文的介绍，大家已经可以轻松使用 Broccoli-emblem-compiler-rails 编译自己的子模板库了！而且对于对 Broccoli 和其它编译工具熟悉的同学还可以进行更多的拓展，增强项目的构建过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde5325