模板使用比当前运行时更旧版本的Handlebars预编译 [英] Template was precompiled with an older version of Handlebars than the current runtime

问题描述

我有这个错误，但是这个问题，我的问题是，我使用gulp而不是grunt。

首先，我的handlebar运行时是 handlebars v4.0.5 （js文件）。

$ b

handlebar -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，//避免重复声明
）））
 .pipe（concat（'templates.js'））
 .pipe（gulp.dest（'js / dist'））; 
}）; 
 $ b $ 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）; 
}）; 
  

哪里可以解决我的问题？

错误：
$ b

未捕获错误：模板已预编译为旧版本
Handlebars比当前运行。请将您的预编译器更新为
a较新版本（> = 4.0.0）或将您的运行时降级到较旧的
版本（> = 2.0.0-beta.1）。

我已经使用 gulp 命令预编译了模板。

非常感谢!!

解决方案

有一种更好的方法来使用自述文件中介绍的特定版本的句柄编译模板：< a href =https://github.com/lazd/gulp-handlebars#compiling-using-a-specific-handlebars-version =noreferrer> https://github.com/lazd/gulp-handlebars#编译使用特定的句柄版本

确保您在应用程序的包中指定了句柄版本。 json file：

  {
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'，
 noRedeclare：true，//避免重复声明
）））
 .pipe（concat（'templates .js'））
 .pipe（gulp.dest（'js / dist'））; 
}）; 
  

I have this error, but the different between this question and my question is that I'm using gulp instead grunt.

First, my handlebar runtime is handlebars v4.0.5 (js file).

The output of handlebar -v is 4.0.5

This is my 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);
});

Where can be my problem?

Error:

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).

I have precompiled the templates using gulp command.

Thank you so much!!

解决方案

There is a better way to compile a template using a specific version of handlebars which is covered in the README: https://github.com/lazd/gulp-handlebars#compiling-using-a-specific-handlebars-version

Make sure you've specified the handlebars version in your app's package.json file:

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

Then require handlebars by passing it as a gulp-handlebars option in your gulpfile:

gulp.task('templates', function () {
  gulp.src('templates/*.hbs')
    .pipe(handlebars({
      handlebars: require('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'));
});

这篇关于模板使用比当前运行时更旧版本的Handlebars预编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！