Javascript 使用 require js 加载 jquery 插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14756567/
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 plugins with require js
提问by Side
I am new to require js, and the problem is I don't really understand how to load jQuery plugins.
我是需要 js 的新手，问题是我不太了解如何加载 jQuery 插件。
I would like to load multiple plugins but I already have problems with the first one, with the chose plugin
我想加载多个插件，但我已经在使用第一个插件时遇到了问题，选择了插件
js
js
//site full url
var siteUrl = window.location.protocol+"//"+window.location.host + "/";
requirejs.config({
baseUrl: siteUrl + "assets/js",
paths: {
"jquery": "libs/jquery",
"jquery-ui": "libs/jquery-ui",
"bootstrap": "libs/bootstrap",
"scripts": "scripts",
"plugins": "plugins",
},
});
requirejs(['jquery', 'jquery-ui', 'bootstrap', 'plugins/chosen'],
function($, chosen){
$('.chzn-select').chosen();
});
my test html
我的测试 html
<select data-placeholder="Choose a country..." style="width:350px;" class="chzn-select">
<option value="">Test</option>
<option value="">Test</option>
<option value="">Test</option>
</select>
and when I try to load it I get the following error
当我尝试加载它时，我收到以下错误
TypeError: $ is not a function
...tion(){"in"==self.hoverState&&self.show()},self.options.delay.show),void 0):self...
bootstrap.js (line 6)
TypeError: $(...).chosen is not a function
$('.chzn-select').chosen();
Could someone please point out what I am doing wrong?
有人可以指出我做错了什么吗？
回答by Waxen
When you're loading your dependencies, requirejs loads them all concurrently. When you're getting that error, it means that your plugin is being loaded and executed before jQuery has been loaded. You need to set up a shim to tell requirejs that the plugin depends on jQuery already being loaded.
当您加载依赖项时，requirejs 会同时加载它们。当您收到该错误时，这意味着您的插件正在加载并在 jQuery 加载之前执行。您需要设置一个 shim 来告诉 requirejs 该插件依赖于已经加载的 jQuery。
Also, most jQuery plugins are not AMD aware, so you'll also want to tell requirejs what to look for to tell it the script loaded correctly. You can do this with an 'exports' entry in your shim.
此外，大多数 jQuery 插件都不支持 AMD，因此您还需要告诉 requirejs 查找什么来告诉它脚本正确加载。您可以使用垫片中的“导出”条目来执行此操作。
I don't believe jqueryUI is AMD-aware either, so an entry in the shim is probably in order for that too. I don't use bootstrap, so I'm not sure if you'll need anything there.
我也不相信 jqueryUI 是 AMD 感知的，所以在 shim 中的条目也可能是为了做到这一点。我不使用引导程序，所以我不确定你是否需要任何东西。
Here's a shim for your plugin and jQueryUI, add this to your call to requirejs.config:
这是您的插件和 jQueryUI 的垫片，将其添加到您对 requirejs.config 的调用中：
shim: {
'plugins\chosen': {
deps: [ 'jquery' ],
exports: 'jQuery.fn.chosen'
},
'jquery-ui': {
deps: [ 'jquery' ],
exports: 'jQuery.ui'
}
}
You may still have some issues that I'm not seeing yet, but this should at least get you moving forward. Also, this is probably worth a read: http://requirejs.org/docs/api.html#config-shim. I would definitely recommend reading that whole page if you haven't yet.
您可能仍然有一些我还没有看到的问题，但这至少应该让您继续前进。此外，这可能值得一读：http: //requirejs.org/docs/api.html#config-shim。如果您还没有阅读整页，我肯定会建议您阅读。
回答by dinesh_malhotra
Hi I will like to tell you here that if you want to include non AMD scripts (which do not include define() call) , we use shim config . I will like to explain with a simple example of jquery hightlight plugin.
嗨，我想在这里告诉您，如果您想包含非 AMD 脚本（不包含 define() 调用），我们使用 shim config 。我想用一个简单的jquery hightlight插件例子来解释。
this will be your config file where you define all paths
这将是您定义所有路径的配置文件
paths:{
"jquery":"/path/to/jquery",
"jgHighlight":"/path/to/jquery.highlight"
},
shim:{
deps:["jquery"], // jquery.highlight dependeps on jquery so it will load after jquery has been loaded
exports:"jqHighlight"
}
Now in a module which starts with define , include jqHighlight like this
现在在以define开头的模块中，像这样包含jqHighlight
define(["requireModulesArray","jgHighlight"],function(requiredModulesAliasArray){
// no need to include any alias for jgHighlight in function(...)
//use it like this now
$("#divT").highlight("someText");
});
Similarly other non amd modules will be included and used. Thanks
类似地，将包含和使用其他非 amd 模块。谢谢
