javascript - 无法使用 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)。

无论如何

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

这里还有另一个问题，即您正在加载远程脚本并且让协议(protocol)自动确定 - 这是 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 来 self 的 MooTools MVC 框架 Epitome。

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