模板是使用比当前运行时更旧版本的 Handlebars 预编译的

Question

我有这个错误，但是 this question 和我的问题之间的不同是我使用 gulp 而不是 grunt。

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

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);
});

我的问题在哪里？

错误：

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

非常感谢！！

Answer 1

好的，我的问题出在 gulp-handlebars 包中，因为在包加载器中，它正在加载一个次要版本。

我手动更新了它，我解决了我的问题。进入node_modules文件夹，找到gulp-handlebars文件夹，打开package.json，并像这样更新依赖项：

"dependencies": {
    "gulp-util": "^3.0.4",
    "handlebars": "4.0.5",
    "through2": "^0.6.3"
  }

Answer 2

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

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

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

然后通过将其作为 gulp-handlebars 选项传递到您的 gulp 文件中来要求车把：

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 预编译的

Template was precompiled with an older version of Handlebars than the current runtime

handlebars.js

gulp