使用 Require.js 引用第三方框架时遇到的一些情况

使用 Require.js 引用第三方框架时遇到的一些情况

在使用Require.js解析依赖的时候，会出现以下几种情况：

程序中的依赖关系 当前程序 依赖于 B包， B包 依赖于 A包

1. A包与B包两者都支持AMD，此时不需要任何操作：

   //B.jsdefine(['A'],function(a){    //code in module B})

2. A包与B包两者都不支持AMD，此时，有以下两种解决方案：

   1. 修改库，使之支持AMD（这也是Sea.js中让人深恶痛绝的一点）

   2. 使用Shim的deps和exports，此时全局变量依然可用，这样可以防止出现奇怪的依赖问题

        //main.js  require.config({  //other configurations    shim{      'B':{        deps:['A'],        exports:'B'      },      'A':{        exports:'A'      }    }  });  //B.js  var B = new function(){  var a = new A();  //code for B  }  //A.js  var A = new function(){  //code for A  }

3. A包不支持AMD，而B包支持AMD，此时只需要用shim把A包导入到require环境中，不需要任何其他操作。

4. A支持AMD，而B包不支持AMD，这个时候，由于在引用的时候监测到为AMD的环境，所以有的框架就不会创建全局变量了，而B包并不支持AMD，它还是使用的全局变量，这个时候，就会出现无法引用的情况了。解决方案也很简单。就是在B包的shim配置中，加上init方法，并在init里将A包的变量设置成全局的：

   //main.jsrequire.config({  //other configurations  shim{    'B':{      deps:['A'],      exports:'B',      init:function(A){        window.A = A;      }    }  }});

在引用angular.js的时候，需要在对应的html页面中把ng-app去掉，而在声明完angular模块的时候，使用angular.bootstrap手动启动angular才行，否则会报错，特别是在与其他模块同时使用的时候。

    //myapp.js    require(['angular','jquery'],function(angular,$){      var app = angular.module('MyApp', []);      //your code in module      angular.bootstrap(document,['MyApp']);    });

以上就是我初次使用requirejs管理包的时候出现的一些问题。