使用 require js 加载 jquery 插件

2022-01-11 00:00:00 jquery jquery-plugins javascript requirejs

我是新手，需要js，问题是我不太了解如何加载jQuery插件.

I am new to require js, and the problem is I don't really understand how to load jQuery plugins.

我想加载多个插件，但第一个插件已经出现问题，选择的插件

I would like to load multiple plugins but I already have problems with the first one, with the chose plugin

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();
});

我的测试 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?

推荐答案

当你加载你的依赖时，requirejs 会同时加载它们.当您收到该错误时，这意味着您的插件在加载 jQuery 之前已被加载和执行.您需要设置一个 shim 来告诉 requirejs 该插件依赖于已加载的 jQuery.

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.

此外，大多数 jQuery 插件不支持 AMD，因此您还需要告诉 requirejs 寻找什么来告诉它正确加载的脚本.您可以通过 shim 中的导出"条目来执行此操作.

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.

我也不相信 jqueryUI 是 AMD 感知的，所以在 shim 中的一个条目可能也是为了这个.我不使用引导程序，所以我不确定你是否需要那里的任何东西.

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 的 shim，将其添加到您对 requirejs.config 的调用中:

Here's a shim for your plugin and jQueryUI, add this to your call to requirejs.config:

shim: {
    'pluginschosen': {
        deps: [ 'jquery' ],
        exports: 'jQuery.fn.chosen'
    },
    'jquery-ui': {
        deps: [ 'jquery' ],
        exports: 'jQuery.ui'
    }
}

您可能还有一些我还没有发现的问题，但这至少应该能让您继续前进.此外，这可能值得一读:http://requirejs.org/docs/api.html#config-shim.如果您还没有阅读，我绝对会建议您阅读整页.

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.

相关文章