简介
broccoli-ember-inline-template-compiler 是一个 npm 包，它提供了一个 Broccoli 插件，可以把 Ember.js 的 Handlebars 模板文件编译成 JavaScript 代码，并将其嵌入到 JavaScript 文件中去，从而使服务器不必额外地发送模板文件。
安装
使用 npm 安装：
npm install broccoli-ember-inline-template-compiler --save-dev
使用方法
让我们来看一个使用 broccoli-ember-inline-template-compiler 的例子。
目录结构
我们有以下的目录结构：
├── Brocfile.js
├── app.js
├── public
│ └── index.html
└── templates
├── application.hbs
└── index.hbsapp.js 是一个简单的入口文件，它使用了 broccoli-static-compiler，将 public 目录下的文件复制到一个名为 dist 的目录下。同时，它通过 broccoli-ember-inline-template-compiler，将 templates 目录下的模板文件编译成 JavaScript 代码，并将其嵌入到对应的 JavaScript 文件中去。
-- -------------------- ---- ------- --- ---------------- - ------------------------------ --- ----------- - ------------------------- --- ------ - --------------------------- --- -------------- - ------------------------------------ --- -------- - -------------------------------------------- --- ---------------------- - --------------------------------------------------- --- --- - --- ----------- ------------------------------------------------------ --- ------------- - --- ------------------- - -------- ------------- -------- --- --- ------------- - --- -------------------------------------- --- ------- - ----------------------- ----------- ----------- ------- - --- --------------- - -------- -------- --- --- ---------- - --- ------------------------ - -------- ------------- ----------- ------------ -------- --- --- --- ----------- - --------------- --------- --------- ------- -------------------------- --- ------- - ------------------------ -------------- - --------
模板文件
我们有两个模板文件：templates/application.hbs 和 templates/index.hbs。
-- -------------------- ---- ------- ---- ------------------------- --- -------- ------ ------- -------- -------- --------- ------ ---------- ------- -------- ------- -- --- ---------- ---------
<!-- templates/index.hbs --> <section> <h2>Welcome to My App</h2> <p>This is the index page of my app.</p> </section>
测试
我们启动 broccoli serve，然后在浏览器中打开 http://localhost:4200。您会看到 My Awesome Ember.js app 和 Welcome to My App 两个标题，说明 broccoli-ember-inline-template-compiler 已经工作了。
结论
在 Ember.js 应用中，提高加载性能非常重要。如果您的应用有很多的 Handlebars 模板文件，而又不想让服务器多发送这些文件，那么 broccoli-ember-inline-template-compiler 就是为您定制的应用。现在，您可以使用这个 npm 包来优化您的 Ember.js 应用的性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde531e