我有这个错误,但 this question和我的问题之间的不同之处在于我正在使用gulp而不是grunt.

首先,我的车把运行时是把手v4.0.5(js文件).

车把-v的输出为4.0.5

这是我的gulpfile.js:

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var handlebars = require('gulp-handlebars');
var wrap = require('gulp-wrap');
var declare = require('gulp-declare');
var concat = require('gulp-concat');

gulp.task('default',['templates','scripts'],function () {

});

gulp.task('templates',function () {
    gulp.src('templates/*.hbs')
      .pipe(handlebars())
      .pipe(wrap('Handlebars.template(<%= contents %>)'))
      .pipe(declare({
          namespace: 'MyApp.templates',noredeclare: true,// Avoid duplicate declarations
      }))
      .pipe(concat('templates.js'))
      .pipe(gulp.dest('js/dist'));
});

gulp.task('scripts',function () {
    return gulp.src([
     'bower_components/handlebars/handlebars.runtime.js','bower_components/jquery/dist/jquery.js','bower_components/bootstrap/dist/bootstrap.js','js/dist/templates.js','js/main.js'])
      .pipe(concat('bundle.js'))
      .pipe(uglify())
      .pipe(gulp.dest('js/dist/'));
});

Main.js

"use strict";
var data = { title: 'This Form',name: 'Joey' };
var html = MyApp.templates.hellotemplate(data);
// console.log(html);

$(document).ready(function () {
    $('#dynamic-content').html(html);
});

哪里可以成为我的问题?

错误:

Uncaught Error: Template was precompiled with an older version of
Handlebars than the current runtime. Please update your precompiler to
a newer version (>= 4.0.0) or downgrade your runtime to an older
version (>= 2.0.0-beta.1).

我使用gulp命令预编译了模板.

非常感谢!!

解决方法

有一种更好的方法来使用README: https://github.com/lazd/gulp-handlebars#compiling-using-a-specific-handlebars-version中介绍的特定版本的把手来编译模板

确保您已在应用的package.json文件中指定了把手版本:

{
  "devDependencies": {
    "handlebars": "^4.0.5"
  }
}

然后通过将其作为gulp文件中的gulp-handlebars选项传递来要求把手:

gulp.task('templates',function () {
  gulp.src('templates/*.hbs')
    .pipe(handlebars({
      handlebars: require('handlebars')
    }))
    .pipe(wrap('Handlebars.template(<%= contents %>)'))
    .pipe(declare({
      namespace: 'MyApp.templates',// Avoid duplicate declarations
    }))
    .pipe(concat('templates.js'))
    .pipe(gulp.dest('js/dist'));
});

gulp – 模板是使用旧版本的Handlebars预编译的,而不是当前运行时的更多相关文章

  1. ios – UIColor到十六进制(网页颜色)

    有没有简单的方法将UIColor转换为十六进制值?

  2. Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

    基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中。下面这篇文章主要给大家介绍了关于在Angular.js项目中使用gulp实现自动化构建以及压缩打包的相关资料,需要的朋友可以参考下。

  3. gulp加批处理(.bat)实现ng多应用一键自动化构建

    这篇文章主要给大家介绍了利用gulp加上批处理(.bat)实现ng多应用一键自动化构建的相关资料,文中介绍的很详细,需要的朋友可以参考借鉴,下面来一起看看吧。

  4. Django 报错:Broken pipe from ('127.0.0.1', 58924)的解决

    这篇文章主要介绍了Django 报错:Broken pipe from ('127.0.0.1', 58924)的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  5. 在Mac OS上安装使用Node.js的项目自动化构建工具Gulp

    Gulp是一个在使用上比Grunt更加简洁的自动化工具(文中附有对比),和Node的npm包管理器配合使用非常方便,下面就记录一下在Mac OS上安装使用Node.js的项目自动化构建工具Gulp的方法:

  6. 前端必会的轻量打包工具gulp使用详解

    这篇文章主要为大家介绍了前端必会的轻量打包工具gulp使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

  7. nodejs用gulp管理前端文件方法

    本篇文章给大家分享了nodejs用gulp管理前端文件的步骤方法以及优缺点分析,有兴趣的朋友参考下。

  8. 一起来了解一下JavaScript的预编译(小结)

    这篇文章主要介绍了一起来了解一下JavaScript的预编译(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  9. 详解handlebars+require基本使用方法

    本文主要对handlebars+require基本使用方法进行详细介绍,文章尾部会附上完整代码供大家参考。需要的朋友一起来看下吧

  10. angularjs使用gulp-uglify压缩后执行报错的解决方法

    下面小编就为大家分享一篇angularjs使用gulp-uglify压缩后执行报错的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部