使用 nodejs 预编译 Emberjs Handlebar 模板的简单方法？答案

【问题标题】：Easy way to precompile Emberjs Handlebar templates with nodejs?使用 nodejs 预编译 Emberjs Handlebar 模板的简单方法？
【发布时间】：2012-02-28 14:31:21
【问题描述】：

我非常喜欢 emberjs，并希望在我的几个小型移动应用程序中迈出下一步，并预编译我的 Ember/Handlebars 模板作为我构建过程的一部分。

我宁愿远离 Ruby，并希望使用 node.js，因为我更喜欢使用它。

我相信我想要使用的是 Ember.Handlebars.precompile，但不幸的是我无法在节点环境中加载规范的 ember.js 文件。来自节点 repl 的天真尝试示例：

> var e = require('./ember');
ReferenceError: window is not defined
    at /Users/jeremyosborne/git/projects/ldls/client/lib/emberjs/src/ember.js:5:1
    at Object.<anonymous> (/Users/jeremyosborne/git/projects/ldls/client/lib/emberjs/src/ember.js:1596:2)
    --- stack trace, you get the idea ---

我想我已经想出了如何在我的代码中设置它们以便它们与我的视图一起正常工作，我只想在浏览器 DOM 之外的环境中编译它们。

代替让规范的 ember.js 加载到节点中，是否有一组特定的文件可以从 ember 存储库中提取并用于编译我的模板？

编辑我做了一个很有效的 kluge 修复，但在可维护性方面得到了 F。我抓住了所有Handlebars 代码减去对window 对象的引用。然后我使用Ember.Handlebars.Compiler 代码，将Ember.create 替换为Object.create，导出我的Ember 对象，并且中提琴的东西在节点中看起来很棒（因为它可以工作并且产生的函数是模板）。但是由于前面提到的维护失败，我不认为这是对我自己问题的回答，所以仍然可以回答。

编辑 2 上面的结果是完全失败的。可能程序有问题，但使用Ember.Handlebars.precompile 或Ember.Handlebars.compile 不起作用。模板制作完成，但是当我在代码中使用附加到 Ember.TEMPLATES 的预编译模板时，它们不起作用。正如 emberjs.com 网站上所建议的那样，我似乎只有在模板被明确传递到修改后的脚本标签时才能使它们工作。

编辑 3 我弄清楚我做错了什么。我的答案如下。

【问题讨论】：

标签： node.js ember.js handlebars.js

【解决方案1】：

我为其他可能想要使用最新版本的 ember.js 执行此操作的人编写了一个官方预编译器 npm 模块

https://npmjs.org/package/ember-template-compiler

安装和使用简单（如下示例）

npm install ember-template-compiler

var compiler = require('ember-template-compiler');
var template = fs.readFileSync('foo.handlebars').toString();
var input = compiler.precompile(template).toString();
var output = "Ember.TEMPLATES['foo'] = Ember.Handlebars.template(" + input + ");";

【讨论】：

【解决方案2】：

jsdom可以模拟window对象

    var jsdom = require("jsdom").jsdom;
    global.document = jsdom("<html><head></head><body></body></html>");
    global.window = document.createWindow();
    global.$ = global.jQuery = window.$ = window.jQuery = require("jquery");
    global.Handlebars = window.Handlebars = require('handlebars');
    global.Application = window.Application = {};
    require('ember.js');

现在您可以从 Ember 运行任何东西，包括 Ember.Handlebars.compile

【讨论】：

【解决方案3】：

我的published a version of ember-precompiler 具有与handlebars 命令行实用程序类似的界面。你可以从 NPM 安装它：

npm install -g ember-precompile

然后运行为：

ember-precompile template... [-f OUTPUT_FILE]

它基本上完成了您所描述的工作（以及 gist 版本所做的工作）：模拟运行 Ember 和 Handlebars 所需的缺失组件，编译模板并将它们添加到 Ember.TEMPLATES。

【讨论】：

【解决方案4】：

我编写了一个名为grunt-ember-handlebars 的咕噜插件，它正是这样做的。它几乎模仿了 Garth 的脚本，但有一个重要区别：

它使用 lib/headless-ember.js 和 lib/ember.js，它们由 ember.js 维护（至少现在）到precompile default templates。如果不想使用 grunt，可以从 tasks/ember-handlebars.js 中的 precompile_handlebars helper 中提取相关代码。

【讨论】：

这是迄今为止最优雅的解决方案。在此之前，我从未使用过 grunt。谢谢你把它介绍给我，也谢谢你写了这个很棒的插件。

【解决方案5】：

查看官方 ember-rails gem 的代码https://github.com/emberjs/ember-rails

虽然它不是 node.js 项目，但它确实向您展示了如何使用 Rails 3.1+ 资产管道预编译模板，并且它包含您在 Node 中执行此操作所需的所有必要 Javascript 代码，而无需破解一个你必须自己维护的解决方案。

更具体地说，查看 vendor/assets/javascripts/ember-precompiler.js 和 lib/ember-rails/hjs_template.rb

我远不是 Node 方面的专家（显然，Rails 更适合我）.. 但我认为这两个文件应该为您指明正确的方向。基本上，您需要将 ember-precompiler.js（由于缺少更好的词而充当“垫片”）与 ember.js 连接，然后调用 EmberRails.precompile 来编译您的模板。

【讨论】：

看起来 Garth 发布的要点与 ember-precompiler.js 基本相同，我没有对其进行测试以确保它有效，但在他的回答和我的回答之间，你应该能够找到一些更可行和可维护的东西。

【解决方案6】：

以下要点包含一个 nodejs 构建脚本，它将预编译给定文件夹中的所有 .handlebars 文件：

https://gist.github.com/1622236

【讨论】：

【解决方案7】：

为我的问题找到了一个足够好的解决方案，看起来很容易维护，我会认为我的问题已解决。

这是我解决问题的方法：

获取预编译 ember 模板所需的最少代码量。
- 将 ember 车把的内容复制到一个文件中。该文件位于 emberjs 存储库：https://github.com/emberjs/ember.js/blob/master/packages/handlebars/lib/main.js
- 在代码中，找到window.Handlebars = Handlebars; 的一个实例并将其删除。
- 附加 Ember 模板编译器和车把覆盖的内容。该文件位于 emberjs 存储库：https://github.com/emberjs/ember.js/blob/master/packages/ember-handlebars/lib/ext.js
- 查找Ember.create 的所有实例并更改为Object.create。
简单预编译过程的概要：
- 使用var Ember = require('./my_ember_precompiler').Ember 加载代码。
- 以字符串形式获取模板并使用var templateString = Ember.Handlebars.precompile(str).toString() 编译它们。
- 这会因应用程序而异，但 Ember 似乎需要注册预编译模板。加载后，对于每个创建的模板，我们需要注册我们的模板。基本上将 templateString 包装在对 Handlebars.template() 的调用中，并确保将此包装的函数添加到 Ember.TEMPLATES 对象中。

在脚本中自动执行上述操作时不会感到痛苦。

【讨论】：

【解决方案8】：

看看npm包Ember-Runner

【讨论】：

我真的很喜欢 ember-runner 的工作方式，并且可能会被它吸引。但是，就目前而言，我有自己的操纵构建过程，我正在寻找简单的 (a) 获取 ember 模板，(b) 使用 nodejs 编译 ember 模板。看起来它应该很容易，但我宁愿不手工构建所有东西，也不想改变我的构建过程。另外，我喜欢jsdom，但是我觉得用它很蹩脚，只是为了我可以加载jquery，然后加载Ember，然后假装有一个dom，这一切都是为了我可以做纯JavaScript处理。呃。
Ember-Runner 编译 ember 模板。我不熟悉它的来源，所以我无法向您指出特定的代码行。我同意它应该不会很难实施。