使用 RequireJS 2.0.1 和 shim 加载 jQuery、Underscore 和 Backbone答案

【问题标题】：Loading jQuery, Underscore and Backbone using RequireJS 2.0.1 and shim使用 RequireJS 2.0.1 和 shim 加载 jQuery、Underscore 和 Backbone
【发布时间】：2012-06-07 15:59:42
【问题描述】：

我正在尝试使用 RequireJS 2.0.1。我的目标是正确加载 jQuery、Underscore 和 Backbone。从最初的 RequireJS doc 我发现作者 J. Burke 添加了（在这个新版本中）new config option called shim。

然后我把这些东西写在这里：

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Testing time</title>
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>Testing time</h1>
    </body>
</html>

scripts/main.js

requirejs.config({
    shim: {
        'libs/jquery': {
            exports: '$'
        },
        'libs/underscore': {
            exports: '_'
        },
        'libs/backbone': {
            deps: ['libs/underscore', 'libs/jquery'],
            exports: 'Backbone'
        }
    }
});


define(
    ['libs/jquery', 'libs/underscore', 'libs/backbone'],

    function (jQueryLocal, underscoreLocal, backboneLocal) {
        console.log('local', jQueryLocal);
        console.log('local', underscoreLocal);
        console.log('local', backboneLocal);
        console.log('global', $);
        console.log('global', _);
        console.log('global', Backbone);
    }
);

一切似乎都很好，但我觉得我错过了一些东西，我知道有 AMDed 版本的 jQuery 和 Underscore，但如果设置如此简单，我不会'不明白我为什么要使用它们。

那么，这个设置是正确的还是我遗漏了什么？

【问题讨论】：

json2 怎么样？我们也需要那个吗？

标签： javascript requirejs shim

【解决方案1】：

如果库还没有调用define() 来声明模块，您只需要使用“shim”配置。 jQuery 已经这样做了，所以你可以从 shim 配置中删除它。上面的代码将按原样工作，但 jQuery 的导出 shim 配置将被忽略，因为 jQuery 将在 shim 工作完成之前调用define()。

使用 shim 与使用脚本调用 define() 来定义模块的缺点：

它的可移植性/可靠性较差：每个开发人员都需要进行 shim 配置，并跟踪库更改。如果库作者在库中内联，每个人都能更有效地获得收益。 umdjs/umd 的代码模板可以帮助进行代码更改。
不太理想的代码加载：shim 配置通过在加载实际库之前加载 shim deps 来工作。所以它比并行加载更多。如果可以并行加载所有脚本会更快，这在使用define() 时是可能的。如果您为最终部署进行构建/优化并将所有脚本组合到一个脚本中，那么这并不是真正的缺点。

【讨论】：

【解决方案2】：

由于 jquery 在其 amd 模块定义中添加了名称“jquery”，您实际上可以避免在原始示例中“填充”jquery（jquery 的路径设置为“libs/jquery”）吗？

define("jquery", [], function () { return jQuery; });

我的经验是，您需要将 jquery.js 放在 baseurl 目录中才能按预期定义 jquery amd 模块，或者像原始示例中那样“填充”它。

【讨论】：

【解决方案3】：

您所做的是正确的，但 jQuery 不需要在 shim 配置中，因为它导出了一个 AMD（异步模块定义）模块。 Underscore 添加后迅速移除了对 AMD / Require.js 的支持，见：Why underscore.js removed support for AMD

Shim 旨在方便使用不导出 AMD 模块的库。如果您使用的库确实支持 AMD，或者有 2 个版本（一个支持 AMD，一个是全局变量），您应该使用 AMD 版本。您应该使用 AMD 版本，原因与您最初使用 AMD 的原因相同，还因为该库可能在其源代码中包含 require.js（或 Almond），并且会给您的项目增加不必要的文件大小。

【讨论】：