grunt contrib车把输出不同于车把npm任务

grunt-contrib-handlebars output is different from handlebars npm task

本文关键字：npm 任务 不同于 输出 grunt contrib      更新时间：2023-09-26

我的问题非常类似于grunt contrib手把-输出与我运行手把npm任务时不同，但没有人回答这个问题，所以我想我应该开始自己的问题。

我正在尝试将我的手把模板文件预编译为js文件。我最初使用handlerbars npm任务来手动编译它，网站可以很好地处理npm生成的输出。我运行以下命令：

handlebars *.handlebars -f template.js

生成以下内容：

    (function() {
  var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
templates['address-book-contact-form'] = template(function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [2,'>= 1.0.0-rc.3'];
helpers = helpers || Handlebars.helpers; partials = partials || Handlebars.partials; data = data || {};
  var buffer = "", stack1, stack2, options, functionType="function", escapeExpression=this.escapeExpression, self=this, helperMissing=helpers.helperMissing;

  buffer += "<form class='"dark-bg'">'n  <input type='"hidden'" id='"propertyId-input'" name='"propertyId'" value='"";
  if (stack1 = helpers.propertyId) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
  else { stack1 = depth0.propertyId; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
  buffer += escapeExpression(stack1)
    + "'"/>'n'n  ";
  stack1 = self.invokePartial(partials['partial-overlay-nav'], 'partial-overlay-nav', depth0, helpers, partials, data);
  if(stack1 || stack1 === 0) { buffer += stack1; }
  buffer += "'n  'n <div class='"property-fields-wrapper'">'n  <fieldset>'n    <div class='"address-book-form row'"> 'n      'n      <div class='"span3'">'n        <h4>Info</h4>'n        ";
  options = {hash:{},data:data};
  stack2 = ((stack1 = helpers.inputField),stack1 ? stack1.call(depth0, "name", "Business Name", depth0.name, true, options) : helperMissing.call(depth0, "inputField", "name", "Business Name", depth0.name, true, options));
  if(stack2 || stack2 === 0) { buffer += stack2; }
  buffer += "'n        ";
  if (stack2 = helpers.addressBookContactTypeDropdown) { stack2 = stack2.call(depth0, {hash:{},data:data}); }
  else { stack2 = depth0.addressBookContactTypeDropdown; stack2 = typeof stack2 === functionType ? stack2.apply(depth0) : stack2; }
  if(stack2 || stack2 === 0) { buffer += stack2; }
  buffer += "'n        ";
  ...

现在，我正在尝试使用grunt和grunt contrib手柄编译我的模板文件。我得到以下输出：

Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
  var stack1, functionType="function";

  if (stack1 = helpers.addressBookContactFormPropertyItem) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
  else { stack1 = depth0.addressBookContactFormPropertyItem; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
  if(stack1 || stack1 === 0) { return stack1; }
  else { return ''; }
  })
Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); data = data || {};

  return "<div class='"address-book-property-selection-wrapper'">'n <div class='"dk_container dk_theme_default'" id='"dk_container_address-book-properties-input'" style='"display: block;'">'n     <a class='"dk_toggle'"><span class='"dk_label'">Property</span></a>'n   </div>'n    <div class='"address-book-properties-container'">'n     <div class='"address-book-properties-search-container'">'n          <input type='"text'" class='"span3'" id='"address-book-properties-search-input'" placeholder='"'" />'n      </div>'n        <ul class='"collection'"></ul>'n    </div>'n</div>";
  })
Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); partials = this.merge(partials, Handlebars.partials); data = data || {};
  var buffer = "", stack1, stack2, options, functionType="function", escapeExpression=this.escapeExpression, self=this, helperMissing=helpers.helperMissing;

  buffer += "<form class='"dark-bg'">'n  <input type='"hidden'" id='"propertyId-input'" name='"propertyId'" value='"";
  if (stack1 = helpers.propertyId) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
  else { stack1 = depth0.propertyId; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
  buffer += escapeExpression(stack1)
    + "'"/>'n'n  ";
  ...

有人能就这种情况提供一些建议吗？我不明白为什么输出不同，以及如何使我的咕哝输出与手动npm手柄编译相同。

输出不同，因为编译器版本不同。

或者使用https://github.com/mattacular/grunt-handlebars-compiler相反，它对我有效，不需要检查版本问题。

我解决了为processName定义函数和定义静态namespace的问题，正如我在grunt contrib handbars中所写的那样-输出与我运行handbars npm任务时不同，下面是我的Gruntfile中的一个片段：

handlebars: {
  compile: {
    options: {
      namespace: 'Handlebars.templates',
      processName: function(filename) {
          var name = filenaname.split('/')[1].split('.');
          return name[0];
      },
      wrapped: true,
      commonjs: null
    },
    files: {
      "js/articles/templates.js": "handlebars/article_snippet.handlebars",
    }
  }
},
相关文章：