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

 

转载于:https://www.cnblogs.com/junwu/p/4994917.html