Javascript 使用 RequireJS 2.0.1 和 shim 加载 jQuery、Underscore 和 Backbone
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10866740/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading jQuery, Underscore and Backbone using RequireJS 2.0.1 and shim
提问by vrde
I am experimenting a little bit with RequireJS 2.0.1. My goal is to load correctly jQuery, Underscore and Backbone. From the original RequireJS docI discovered that the author J. Burke added (to this new release) a new config option called shim.
我正在尝试使用 RequireJS 2.0.1。我的目标是正确加载 jQuery、Underscore 和 Backbone。从最初的RequireJS 文档中，我发现作者 J. Burke 添加了（到这个新版本）一个名为 shim的新配置选项。
Then I wrote this stuff down here:
然后我把这些东西写在这里：
index.html
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
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);
}
);
Everything seems to work quite fine, but I have the feeling that I'm missing something, I know that there are AMDedversion of jQuery and Underscore but if the setup is so simple I don't understand why I should use them.
一切似乎都很好，但我觉得我错过了一些东西，我知道有AMDed版本的 jQuery 和Underscore但如果设置如此简单，我不明白为什么我应该使用它们。
So, is this setup right or I'm missing something?
那么，这个设置是正确的还是我遗漏了什么？
回答by jrburke
You only need to use "shim" config if the library does not already call define()to declare a module. jQuery does this already, so you can remove that from the shim config. The above code will work as is, but the exports shim config for jQuery will be ignored since jQuery will call define()before the shim work is done.
如果库尚未调用define()以声明模块，则只需要使用“shim”配置。jQuery 已经这样做了，所以你可以从 shim 配置中删除它。上面的代码将按原样工作，但 jQuery 的导出垫片配置将被忽略，因为 jQuery 将define()在垫片工作完成之前调用。
The downsides with the shim vs having the script call define()to define a module:
使用 shim 与使用脚本调用define()来定义模块的缺点：
It is less portable/reliable: every developer needs to do the shim config, and keep track of library changes. If the library author does it inline in the library, everyone gets the benefits more efficiently. The code templates at umdjs/umdcan help with that code change.
Less optimal code loading: shim config works by loading shim deps before loading the actual library. So it is a bit more sequential loading than parallel. It is faster if all scripts can be loaded in parallel, which is possible when
define()is used. If you do a build/optimization for final deployment and combine all the scripts into one script, then this is not really a downside.
它的可移植性/可靠性较差：每个开发人员都需要进行 shim 配置，并跟踪库更改。如果库作者在库中内联，每个人都可以更有效地获得好处。umdjs/umd 中的代码模板可以帮助更改代码。
不太理想的代码加载：shim config 通过在加载实际库之前加载 shim deps 来工作。因此，顺序加载比并行加载要多一些。如果所有脚本都可以并行加载，速度会更快，这在
define()使用时是可能的。如果您为最终部署进行构建/优化并将所有脚本合并到一个脚本中，那么这并不是真正的缺点。
回答by hapticdata
What you are doing is correct, but jQuery does not need to be in the shim config because it exports an AMD(Asynchronous Module Definition) module. Underscore removed its support for AMD / Require.js quickly after adding it, see: Why underscore.js removed support for AMD
您在做什么是正确的，但 jQuery 不需要在 shim 配置中，因为它导出AMD（异步模块定义）模块。Underscore 添加后很快就去掉了对 AMD / Require.js 的支持，参见：Why underscore.jsremove support for AMD
Shim is intended as a convenience for using libraries that do not export an AMD module. If the library you are using does support AMD, or has 2 versions (one that supports AMD, and one that is a global variable) you should use the AMD version. You should use the AMD version for the same reasons you would use AMD in the first place and also because the library may include require.js (or Almond) in its source and would be adding unnecessary file size to your project.
Shim 旨在方便使用不导出 AMD 模块的库。如果您使用的库确实支持 AMD，或者有 2 个版本（一个支持 AMD，一个是全局变量），您应该使用 AMD 版本。您应该使用 AMD 版本的原因与您首先使用 AMD 的原因相同，还因为该库可能在其源代码中包含 require.js（或Almond），并且会向您的项目添加不必要的文件大小。
回答by Claudijo
Can you actually avoid "shimming" jquery in the original example (where the path to jquery is set to 'libs/jquery'), since jquery adds the name "jquery" in their amd module definition?
你真的能避免在原始示例中“填充”jquery（其中 jquery 的路径设置为“libs/jquery”），因为 jquery 在它们的 amd 模块定义中添加了名称“jquery”？
define( "jquery", [], function () { return jQuery; } );
定义（“ jquery”，[]，函数（）{返回jQuery；}）；
My experience is that you need to put jquery.js in the baseurl directory to get the jquery amd module defined as expected, or "shim" it like in the original example.
我的经验是，您需要将 jquery.js 放在 baseurl 目录中以获取按预期定义的 jquery amd 模块，或者像原始示例中那样“填充”它。
