javascript - 使用 requirejs 加载 mustache

Question

我想通过 requirejs 加载和使用 mustache。

也许这个问题已经问过了：
AMD Module Loading Error with Mustache using RequireJS

无论如何，我想弄清楚如何修复我的代码：

---

main.js

require.config({
    paths: {
        jquery: 'libs/jquery/jquery',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-optamd3-min',
        mustache: "libs/mustache/mustache"
    }
});

require([
    'views/app'
    ], function(AppView){
        var app_view = new AppView;
 });

---

应用程序.js

define([
    'jquery',
    'underscore', 
    'backbone',
    "mustache"
    ], function($, _, Backbone, Mustache) {
        console.log($, _, Backbone, Mustache); // <-- *** Mustache is null ***
        // ......
       }
);

---

正如您在app.js文件评论中看到的那样，Mustache is null......
我应该使用另一个 Mustache 库吗？这是我使用的Mustache

Answer 1

截至 12 年 7 月， Mustache 似乎支持 AMD 模块。因此，它现在应该可以使用诸如 require.js 之类的加载器开箱即用。

Answer 2

你应该在你的 mustache 目录中创建一个新文件 mustache-wrap.js，如下所示：

 define(['libs/mustache/mustache'], function(Mustache){
    // Tell Require.js that this module returns a reference to Mustache
    return Mustache;
 });

然后你的主要将是：

  mustache: "libs/mustache/mustache-wrap"

Answer 3

在发布这个问题（和答案）时不确定RequireJS2.1.0 是否已经发布，但现在处理这个问题的首选方法是使用shimconfig 元素（有关项目文档页面的更多信息）。

您的 main.js 将变为：

require.config({
    paths: {
        jquery: 'libs/jquery/jquery',
        underscore: 'libs/underscore/underscore-min',
        backbone: 'libs/backbone/backbone-optamd3-min',
        mustache: "libs/mustache/mustache"
    },
    shim: {
        'mustache': {
            exports: 'Mustache'
        }
    }
});
(...)

这实际上与包装器建议的@AntoJs 相同，但没有样板代码。

...但是，由于 Mustache 支持 AMD，因此无需首先包装/填充！

Answer 4

您也可以在使用 mustache 的代码中或在“main.js”中的某处进行内联命名定义（省去创建 *-wrap 文件的麻烦）

define('mustache', ['libs/mustache/mustache'], function(){
    // Tell Require.js that this module returns a reference to Mustache
    return Mustache; // from global
});
require(
    ['jquery','underscore','backbone','mustache']
    , function($, _, BB, Mustache){
        // use them
    }
)