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

问题描述

我有这个错误，但 this question 而我的问题是我正在使用 gulp 而不是 grunt.

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

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

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

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, // 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?

错误:

未捕获的错误:模板是用旧版本的Handlebars 比当前运行时.请将您的预编译器更新为较新的版本 (>= 4.0.0) 或将您的运行时降级到较旧的版本版本 (>= 2.0.0-beta.1).

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 命令预编译了模板.

I have precompiled the templates using gulp command.

非常感谢！！

推荐答案

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

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

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

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

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

然后通过在 gulpfile 中将其作为 gulp-handlebars 选项传递来要求车把:

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屋！