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 代码。