gulp – 模板是使用旧版本的Handlebars预编译的,而不是当前运行时

前端之家收集整理的这篇文章主要介绍了gulp – 模板是使用旧版本的Handlebars预编译的,而不是当前运行时前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这个错误,但 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'));
});

猜你在找的JavaScript相关文章