如何使用 RequireJS 加载 Handlebars 运行时答案

【问题标题】：How to load Handlebars runtime with RequireJS如何使用 RequireJS 加载 Handlebars 运行时
【发布时间】：2013-12-25 14:42:28
【问题描述】：

我是 RequireJS 的新手，正在尝试使用 RequireJS 加载车把预编译模板。它加载了车把模板和运行时，但车把运行时未定义。

文件夹结构

www
 |__index.html
 |__js
    |__main.js
    |__lib
    |    |__jquery-1.10.1.min.js
    |    |__handlebars.runtime-v1.1.2.js
    |    |__require.js
    |__modules
    |    |__content.js
    |__templates
         |__content-tmpl.js     //handlebars precompiled template

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="js/lib/require.js" data-main="js/main"></script>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
</body>
</html>

main.js

requirejs.config({
    paths:{
        jquery:'lib/jquery-1.10.1.min',
        'handlebars.runtime':'lib/handlebars.runtime-v1.1.2'
    }
});
requirejs(['modules/content','jquery'],function (content,$) {

    $(function(){
        content.initModule();
    });
});

content.js

define(['jquery','../templates/content-tmpl'],function($,template){
    return{
        initModule:function(){
            $('body').append(template());
        }
    }
});

content-tmpl.js（已编译的车把模板）

define(['handlebars.runtime'], function (Handlebars) {

//Error raise here. Handlebars is undefined.

    Handlebars = Handlebars["default"];
    var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
    return templates['content'] = template(function (Handlebars, depth0, helpers, partials, data) {
        this.compilerInfo = [4, '>= 1.0.0'];
        helpers = this.merge(helpers, Handlebars.helpers);
        data = data || {};
        return "<div>\r\n    Hello Handlebars and RequireJS\r\n</div>";
    });
});

控制台错误

TypeError: Cannot read property 'default' of undefined

【问题讨论】：

有人能找到解决这个问题的方法吗？我有同样的问题，不知道需要发生什么。听起来很多人都遇到了这个问题。
我还发现 requirejs 很难与其他库一起使用，反之亦然。这就是为什么我创建了一个更易于使用并使用 Angular 进行测试的库。底部有一个演示应用：gngeorgiev.github.io/Modulerr.js

标签： javascript requirejs handlebars.js

【解决方案1】：

我的猜测是handlebars.runtime.js 不是 AMD 模块，因此您需要使用 shim config 对其进行配置。在你的 require.js 配置中添加

requirejs.config({
  shim: {
    "handlebars.runtime": {
      exports: "Handlebars"
    }
  }
});

这样，当你调用require("handlebars.runtime") 时，require.js 会知道抓取 window.Handlebars 变量并在脚本加载后将其传递给你。

【讨论】：

Handlebars 1.3 有一个 AMD 版本，所以你现在应该可以直接要求它了。

【解决方案2】：

如果您使用的是 RequireJS，则应该包含 AMD 版本的运行时，在这种情况下不需要导出。

require.config({
    paths: {
        'handlebars.runtime': '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.runtime.amd.min'
    }
});

然后当你想要访问 Handlebars 对象时（例如注册一个助手）。

require(['handlebars.runtime'], function(HandlebarsRuntime) {
    var Handlebars = HandlebarsRuntime.default;
});

您可以在https://github.com/ryan-blunden/handlebars-requrejs 上查看使用已编译的 Handlebars 模板和 RequireJS 的最新应用程序示例

【讨论】：