requirejs多重依赖的实现

在使用requirejs管理代码的时候会有a依赖b，b依赖c……这样的情况，我选我遇到的的一种来说。

我在某一次使用requirejs的时候引入angular与它的插件angular-ui-router，angula-ui-router是依赖于angular的，而main.js又依赖于这两者，如果直接使用

//config.js

requirejs.config({
  baseUrl: './js',
  paths: {
    jquery: 'lib/jquery/jquery',
    angular: 'lib/angular/angular',
angularUiRouter:'lib/angular-ui-router/angular-ui-router',
main:'main'
  },
  shim: {
 angular : { 

   exports : 'angular'

   },
 angularUiRouter : { 
 exports : 'angularUiRouter'
 }
  }
 
 
});

requirejs(['main'], function(main) {
});

//main.js

define(['angular','angularUiRouter',function(angular,angularUiRouter){

});

的写法，就会出现有时候angular-ui-router先于angular被读取的情况，就是第一次进入页面肯定会报错。

那么我在angular-ui-router.js里面给它加上了define(['angular'],function(angular){});这样一层，

在config.js里面

在

requirejs(['main'], function(main) {
});

之前添加

requirejs(['angularUiRouter'], function(angularUiRouter) {
});

同时main.js里面的

define(['angular','angularUiRouter',function(angular,angularUiRouter){

修改为

define(['angularUiRouter'], function(angularUiRouter) {

这样就实现了两重依赖而不会有报错的情况了

ps：同样的，mvc模式我们可以这么写

在新添加的模块controllers.js中

define(['angular'],function(angular){

angular.module('firstController',function($scope){……});

});

在config.js添加声明

requirejs.config({

paths:{

……

controllers:'controller'

},

shim:{

……

}

})

requirejs(['controllers'],function(angular){

});

requirejs(['main'], function(main) {
});

在main.js中

define(['controllers','angularUiRouter',function(controllers,angularUiRouter){

});

新定义的模块就能被引用到主要js里面了