テンプレートは現在のランタイムより古いバージョンのハンドルバーでプリコンパイルされました

Question

私はこのエラーがありますが、this questionと私の質問の違いは、私がgulpを代わりに使用していることです。

まず、私のハンドルバーランタイムはハンドルバーv4.0.5（jsファイル）です。

は4.0.5

これは私のgulpfile.jsである-v ハンドルの出力：

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

私は一気コマンドを使用して、テンプレートをプリコンパイルしています。

ありがとうございます！

Answer 1

の特定のバージョンを使用してテンプレートをコンパイルするためのより良い方法がありますREADMEに覆われているハンドルバー：https://github.com/lazd/gulp-handlebars#compiling-using-a-specific-handlebars-version

は、アプリのpackage.jsonファイルにハンドルバーのバージョンを指定していることを確認してください：

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

を

は、その後、あなたのgulpfileでゴクゴク-ハンドルオプションとしてそれを渡すことで、ハンドルを必要とする：あなたは、依存関係は、おそらく変化するであろう。この場合には、NPM update` `実行するかどうので、私は、@Griffin答えを使用することをお勧め

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

Answer 2

私の問題はgulp-handlebarsパッケージにありました。パッケージローダーではマイナーバージョンがロードされています。

手動で更新して問題を解決しました。 node_modulesフォルダに移動し、一息、ハンドルバーにフォルダを見つけ、オープンpackage.json、このようなdependiciesを更新：

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