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

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

在使用Require.js解析依賴的時候，會出現以下幾種情況：

程序中的依賴關系 當前程序 依賴於 B包， B包 依賴於 A包

1. A包與B包兩者都支持AMD，此時不需要任何操作：

    //B.js
    define(['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.js
    require.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管理包的時候出現的一些問題。