logo标签列表

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

javascriptrequirejsshim
31

我正在尝试使用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的 AMDed 版本，但如果设置如此简单，我不明白为什么我应该使用它们。

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

json2 怎么样？ 我们也需要它吗？ - Henry
3个回答
32

只有当库没有调用define()来声明模块时，您才需要使用"shim"配置。jQuery已经这样做了，所以您可以从shim配置中移除它。以上代码将按原样工作，但是对于jQuery的exports shim配置将被忽略，因为jQuery会在shim工作完成之前调用define()。

使用shim与让脚本调用define()来定义模块相比的劣势：

  1. 可移植性/可靠性较差：每个开发人员都需要进行shim配置，并跟踪库更改。如果库作者在库中内联执行此操作，则每个人都能更高效地获得好处。在umdjs/umd中提供的代码模板可以帮助修改代码。

  2. 较低的代码加载效率：shim配置通过在加载实际库之前加载shim依赖项来工作。因此，它比并行加载稍微顺序化一些。如果所有脚本都可以并行加载，则速度更快，而当使用define()时，这是可能的。如果您对最终部署进行构建/优化并将所有脚本合并成一个脚本，则这不是一个真正的缺点。

8
你所做的是正确的，但是jQuery不需要在shim配置中，因为它导出了一个AMD（异步模块定义）模块。Underscore在添加支持AMD / Require.js后很快就删除了它，参见：为什么underscore.js删除了对AMD的支持 Shim旨在方便使用不导出AMD模块的库。如果你正在使用的库支持AMD，或者有两个版本（一个支持AMD，一个是全局变量），你应该使用AMD版本。你应该出于相同的原因使用AMD版本，也因为该库可能会在其源代码中包含require.js（或Almond），从而为项目增加不必要的文件大小。
0

在原始示例中，路径设置为“libs/jquery”，你是否可以实际避免使用“shimming”jquery，因为jquery在其amd模块定义中添加了名称“jquery”？

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

我的经验是，您需要将jquery.js放在baseurl目录中，以按预期定义jquery amd模块，或者像在原始示例中一样进行“shim”处理。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接