如何在requirejs下引用bootstrap

原本以为只要require过来就能用

require(['jquery','underscore','bootstrap','cache'],function($,U,B,C){

但发现会报错,类似未定义jQuery

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

解决办法很简单 只需要配置requireJS的shim参数,来完成jquery插件的加载。

require.config({
baseUrl:'js',
paths:{
jquery:'static/jquery-1.10.2.min',
underscore:'static/underscore',
bootstrap:'static/bootstrap'
},
shim:{
'bootstrap':['jquery']
},
urlArgs: "bust=" + (new Date()).getTime()
})

完美解决。

当然 jquery ui 也类似

requirejs.config({
shim: {
'jquery.ui.core': ['jquery'],
'jquery.ui.widget': ['jquery'],
'jquery.ui.mouse': ['jquery'],
'jquery.ui.slider':['jquery']
},
paths : {
jquery : 'jquery-2.1.1/jquery',
domReady : 'require-2.1.11/domReady',
'jquery.ui.core' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.core',
'jquery.ui.widget' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.widget',
'jquery.ui.mouse' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.mouse',
'jquery.ui.slider' : 'jquery-ui-1.10.4/development-bundle/ui/jquery.ui.slider'
}
}); require([ 'jquery', 'domReady','jquery.ui.core','jquery.ui.widget','jquery.ui.mouse','jquery.ui.slider'],
function($) { $("#slider" ).slider({
value:0,
min: 0,
max: 4,
step: 1,
slide: function( event, ui ) {}
}); });
上一篇:为什么我引用bootstrap的font-awesome的图标不出来,就单单是一个HTML里面引用的?


下一篇:ImagXpress中如何修改Alpha通道方法汇总