如何在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 ) {}       
      });        
                
    });