使用 RequireJS 2.0.1 和填充码加载 jQuery、Underscore 和 Backbone

Loading jQuery, Underscore and Backbone using RequireJS 2.0.1 and shim

本文关键字：加载 jQuery Backbone Underscore 填充 RequireJS 使用      更新时间：2023-09-26

我正在尝试使用RequireJS 2.0.1。我的目标是正确加载jQuery，Underscore和Backbone。从最初的 RequireJS 文档中，我发现作者 J. Burke 添加了（到这个新版本）一个名为 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);
    }
);

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

那么，这个设置是否正确还是我错过了什么？

仅当库尚未调用 define() 来声明模块时，才需要使用"shim"配置。 jQuery已经这样做了，所以你可以从填充码配置中删除它。上面的代码将按原样工作，但 jQuery 的导出填充程序配置将被忽略，因为 jQuery 将在填充程序工作完成之前调用define()。

填充程序与使用脚本调用define()定义模块的缺点：

  1. 它的可移植性/可靠性较低：每个开发人员都需要进行填充码配置，并跟踪库更改。如果库作者在库中内联执行此操作，则每个人都可以更有效地获得收益。umdjs/umd 上的代码模板可以帮助进行代码更改。

  2. 不太理想的代码加载：填充程序配置的工作原理是在加载实际库之前加载填充程序。因此，顺序加载比并行加载更多。如果所有脚本都可以并行加载，则速度更快，这在使用define()时是可能的。如果您为最终部署执行构建/优化并将所有脚本合并到一个脚本中，那么这并不是一个真正的缺点。

你正在做的是正确的，但jQuery不需要在填充码配置中，因为它导出了一个AMD（异步模块定义）模块。下划线删除了对AMD/Require的支持.js添加后很快，请参阅：为什么下划线.js删除了对AMD的支持

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

您实际上能否避免在原始示例中"填充"jquery（其中jquery的路径设置为"libs/jquery"），因为jquery在其amd模块定义中添加了名称"jquery"？

define（ "jquery"， []， function （） { return jQuery; } ）;

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

相关文章：