无法使用 RequireJS 和 MooTools 使 $ 工作

Question

我正在尝试结合使用 RequireJS 和 MooTools 来构建网站。这是我第一次使用这两个库。有大量关于将 RequireJS 与 jQuery 结合使用的文档，但关于将其与 MooTools 结合使用的文档则较少。我真的只找到了this。但是我遇到了一些麻烦，其中大部分可能是无知的结果；不过，也许你们都可以提供帮助。

目前，我只是在尝试测试基本功能并了解我将如何进行设置。这是我尝试过的：

在我的网站页脚中，我有这个脚本标签：

    <script src="assets/js/vendor/require.js" data-main="../app.js"></script>

这会加载带有 app.js 文件的 requirejs。在 app.js 中我主要处理路径：

requirejs.config({
    "baseUrl": "assets/js",
    "paths": {
      "mootools": "//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed"
    }
});

// Load the main app module to start the app
requirejs(["main"]);

最后，在 main.js 中，我有（到目前为止）以下内容：

define(["mootools"], function($) {

    var a = $$('.menu'); // .menu is a nav menu in the DOM
    console.log(a);

    var b = $('.menu');
    console.log(b);

});

所以在这里，a 有效，但 b 导致错误：undefined is not a function。所以这里嵌入了几个问题。首先，有人能告诉我在 mootools 中 $ 和 $$ 的含义有什么区别吗？我从this tutorial 收集到，两者都用于 mootools。另外，为什么 mootools 没有映射到 $？据我了解，使用 jQuery，您可以这样做，例如，请参阅 here。

我确信这里有一些基本的混淆，但请原谅。我是这些工具的新手。

Answer 1

MooTools（原样）不兼容 AMD。 David Walsh 很酷，但他不喜欢也不使用 RequireJS。他帖子中的信息已经过时，不再实用。事实上，我相信 MooTools 核心团队中没有一个人喜欢 AMD 或使用它。无论如何，这是无关紧要的。 jQuery 现在是基于 AMD 的，所以使用起来很容易。 MooTools 2 年前尝试过 - https://github.com/arian/mootools-core/tree/1.5amd - 然后放弃了。 1.5 还没有出来（希望下周仍然没有 AMD）。

不管怎样

通过期望脚本神奇地返回未定义模块的$，您不能以这种方式完全做到这一点。

这里还有另一个问题，即您正在加载远程脚本并且您让协议自动确定 - 这是 RequireJS 自行处理的一些古怪的事情。

有两种或三种方法来处理它。

你可以只定义一个本地模块，例如你自己的 mootools.js

define([
    'http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'
], function(){
    return window.$;
});

然后按要求使用：

require(['mootools'], function($){
    $(document.body).adopt(new Element('div[html=hi]'));
});

例如。 http://jsfiddle.net/dimitar/5zYnW/

然而，mootools 无论如何都会导出各种全局变量，所以它并不是很有用。你最好使用requirejs shim config。

垫片示例

require.config({
    paths: {
        mootools: 'https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed'        
    },
    shim: {
        mootools: {
            exports: '$'
        }
    }
});

// some code.
require(['mootools'], function(){
    document.id('foo').adopt(new Element('div[html=hi]'));
});

例如：http://jsfiddle.net/dimitar/5zYnW/1/

老派

我发现在 RequireJS 之前加载 MooTools 更容易，并假设它在我编写的所有模块中都是全局的 - 这更有意义，因为有太多的全局导出要捕获。例如。类、元素、请求等。

例如。 https://github.com/epitome-mvc/Epitome/blob/master/example/js/model-demo-require.js -s 来自我的 MooTools MVC 框架 Epitome。

这是通过 UMD 包装的示例模块代码 - https://github.com/epitome-mvc/Epitome/blob/master/src/epitome-model.js - 唯一隐含需要 MooTools 的代码是 node.js 代码。