使用requireJS的shim参数，完成jquery插件的加载

最新推荐文章于 2025-09-30 05:51:37 发布

原创

最新推荐文章于 2025-09-30 05:51:37 发布 · 1.8w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#shim使用 #requirejs加载jquery插件

当使用requireJS框架时，jQuery不再生成全局变量$。为解决jQuery插件依赖全局$的问题，可以利用requireJS的shim参数配置插件依赖。例如，加载jquery-ui的slider插件，通过在path和shim中设置模块映射及依赖，实现插件的模块化加载，避免全局变量污染。

没有requireJS框架之前，如果我们想使用jquery框架，会在HTML页面中通过<script>标签加载，这个时候jquery框架生成全局变量$和jQuery等全局变量。如果项目中引用了requireJS框架，采用模块化的方式加载jquery，那么jquery不会再添加全局变量$和jQuery。现在问题来了，虽然jquery框架已经开始支持AMD规范，但是jquery的众多插件还是不支持AMD，仍然像以前一样需要使用全局变量$。jquery插件大多都是如下结构：

(function( $, undefined ) {

})( jQuery );

如果我们项目中使用了jquery插件，但是jquery框架是通过requireJS加载的（不会添加全局变量$），那怎么完成jquery插件的加载呢？使用传统的方，在HTML页面中通过<script>加载jquery插件，肯定是不行的。这个时候我们需要使用到

requireJS的shim参数，来完成jquery插件的加载。下面我们以加载jquery-ui的slider插件为例：

requirejs.config({
	shim: {
        'jquery.ui.core': ['jquery'],
        'jquery.ui.widget': ['jquery'],
        'jquery.ui.mouse': ['jquery'],
        'jquery.ui.slider':['jquery']
    },
	paths : {
		jque