RequireJS配置項筆記

讀不順中文文檔，對應中文文檔，自行翻譯的……若是有問題/錯誤，歡迎指點；

修改配置選項：

方法1、
    <script src='require.js'></script>
    <script>
        require.config({
            //在頂級HTML頁面或頂級腳本文件（沒有定義define()模塊的腳本文件）中配置；
        })
    </script>
    
方法2、
    在主模塊中配置；
        缺點：主模塊異步加載，多入口的話，會隨機報錯；
        
方法3、
    <script>
        var require = {
            //在調用require.js以前，將配置定義爲全局變量；
            //配置在調用require.js時自動應用；
            var require = {
                deps: ["some/module1", "my/module2", "a.js", "b.js"],
                callback: function(module1, module2) {
                
                }
            };
        }
    </script>
    <script src='require.js'></script>

支持的配置選項：

baseUrl:模塊查找的根路徑；

//目的：沒必要在重複相同的上級路徑，只需考慮引用基路徑下的哪一個腳本
    //注意：只要以相對路徑設置baseUrl，是相對於引用requireJS的HTML位置，而不是相對於main.js
      require.config({
        baseUrl: "/another/path"
      });
      
    如下路徑文件不會基於baseUrl查找：*.js    /**    http://...
    默認值：不設置該屬性的話，默認是加載require.js的HTML所在的位置；

paths:module ID & 路徑映射

//目的：再也不使用路徑調用腳本，而僅僅經過module ID調用；
    //針對於不在baseUrl/在baseUrl子孫文件下的模塊進行映射；
    //路徑映射最後一節應該是一個文件夾，而不是腳本文件；
    //映射是基於baseUrl的，除非以‘/’或‘http://’開始;
  require.config({
    baseUrl: "/another/path",
    paths: {
        "some": "some/v1.0",
        "others":["http://files...","location/files"]
    }
  });
    /*屬性值爲鍵/值對:    鍵表示module ID  值爲路徑/路徑列表
    *（路徑列表爲數組，當第一項獲取不到的時候，加載第二項...）
    *路徑列表中，文件地址指向的是同一文件，只是作備選；
    */
    /*
    *若是paths屬性的值中的路徑腳本文件有自有名，該值的鍵名的值爲undefined，而不是該腳本文件；
    *只能經過自有名來引用該路徑的腳本文件；
    */

注意：一些命名的第三方庫（如jquery），不能給它更名，鍵名不能設置jquery之外的名字，不然找不到jquery庫；

map：調用模塊文件 & 模塊映射------適用於不一樣模塊調用不一樣版本的腳本；

//目的：再也不使用路徑調用腳本，而僅僅經過module ID調用；
    //只應用於真正的AMD模塊---調用define()定義並匿名的模塊
    //map屬性只能用純module IDs做爲鍵名------純module IDs?----------------以paths鍵名開始的路徑？
    //構建優化不會破壞map配置，即構建後仍然可用；
    requirejs.config({
        map: {
            '*': {
                'foo': 'foo1.2'
            },
            'some/newmodule': {
                'foo': 'foo1.2'
            },
            'some/oldmodule': {
                'foo': 'foo1.0'
            }
        }
    });

//抱怨下，map我理解的官文是調用不一樣的模板，但對jquery不行……
若是要引用不一樣版本的jquery，請看這裏

bundles:配置一個腳本文件中的多個模塊------未實踐

//目的：將一個腳本中的多個模塊暴露出來，使其能夠直接被require()；
    //推薦一個腳本文件一個模塊；
    //一個腳本文件一個模塊，模塊會自動綁定到module ID上；
    *一個腳本多個模塊，模塊須要手動的將模塊名綁定到module ID上；
    requirejs.config({
        bundles: {
            'primary': ['main', 'util', 'text', 'text!template.html'],
            'secondary': ['text!secondary.html']
        }
    });
    //Note that the keys and values are module IDs, not path segments.

shim:兼容不能用define()來聲明依賴的傳統「瀏覽器全局」腳本

/*
    *按我理解：
    *不兼容define()，不符合AMD規範，沒有像define()同樣，最終return 對象/函數；
    *因此須要用shim將其中的某個全局變量exports給requirejs，才能被define()和require()引用；
    *
    *若是須要暴露多個全局變量，就不能用exports，而用init函數
    *init:function(){

• return{

• }

  *}
     */
     //僅僅起到聲明依賴關係的做用，但不會加載依賴-----能夠理解爲shim只說不作；
     //若是要加載shim指定的依賴，仍須要require()/define()調用；
     //要求RequireJS2.1.0以上版本
     //RequireJS有wrapShim build 屬性能自動包裹shimmed code在define()中升級爲AMD，但不保證能正常執行；
     requirejs.config({
         /*
         *shim只能應用到非AMD規範的腳本文件上；
         *應用到符合AMD規範的腳本文件上不起做用；
         */
         shim: {
             /*
             *shim屬性值爲鍵/值對：鍵值爲module ID；
             *若是backbone、underscore、foo在baseUrl文件中，則不須要paths配置；
             *不然，使用paths配置   值（文件路徑）  到   鍵名
             */
             'backbone': {
                 /*
                 *deps聲明依賴關係；
                 *deps的值只能是非AMD規範的腳本或者「沒有依賴關係且創建全局變量後調用define()的AMD庫」；
                 *若是shim用AMD模塊做爲依賴的話，會有錯誤發生--------由於shim對符合AMD規範的腳本不起做用；
                 */
                 deps: ['underscore', 'jquery'],
                 //將backbone傳統腳本的Backbone函數暴露出來，相似於define()中的return；
                 exports: 'Backbone'
             },
             'underscore': {
                 exports: '_'
             },
             'foo': {
                 deps: ['bar'],
                 exports: 'Foo',
                 init: function (bar) {
                     //初始化傳統腳本；
                     return this.Foo.noConflict();
                 }
             },
             //像jQuery插件不須要暴露任何全局變量，則只需聲明依賴便可；
             //若要判斷腳本是否被加載，須要聲明exports
             'jquery.scroll':['jquery']
         }
     });

  那麼，怎麼知道暴漏什麼屬性、對象或者方法呢？
  哈哈，個人作法是，看源碼最後一行--------通常看return什麼就根據須要暴漏什麼；

  config:設置application級別的配置信息；-------未實踐

  //config的屬性值爲鍵/值對；
     requirejs.config({
         config: {
             'bar': {
                 size: 'large'
             },
             'baz': {
                 color: 'blue'
             }
         }
     });
     define(function () {
         //在模塊中做爲module.config()的屬性來讀取配置信息；
         var size = module.config().size;
     });
     //將配置信息傳遞給一個包package
     requirejs.config({
         //Pass an API key for use in the pixie package's
         //main module.
         config: {
             'pixie/index': {
                 apiKey: 'XJKDLNS'
             }
         },
         //Set up config for the "pixie" package, whose main
         //module is the index.js file in the pixie folder.
         packages: [
             {
                 name: 'pixie',
                 main: 'index'
             }
         ]
     });

  nodeIdCompat:node module ID兼容-------未實踐

  //Node中認爲模塊ID  example.js和example是相同的------經過設置true認爲是不一樣的；
     //而在RequireJS中，example.js和example是不一樣的
     require.config({
         nodeIdCompat:true    //若是經過npm加載模塊的話，須要設置爲true-----只對‘.js’後綴起做用；
     })

  waitSeconds:設置超時時間；-------未實踐

  //目的：設置加載腳本超時時間，超時後放棄加載；
     //默認7s；
     //設置0禁止超時；
     require.config({
         waitSeconds:0
     })

  deps:在require.js加載以前，定義全局對象require設置依賴環境-------未實踐

  <script>
         var require = {
                 deps: ["some/module1", "my/module2", "a.js", "b.js"]    //依賴數組；
             }
         };
     </script>
     <script src="scripts/require.js"></script>

  callback:在deps加載完成後執行的程序-------未實踐

  <script>
         var require = {
                 deps: ["some/module1", "my/module2", "a.js", "b.js"]    //依賴數組；
                 callback:function(){
                     //deps加載完成後執行；
                 }
             }
         };
     </script>
     <script src="scripts/require.js"></script>

  enforceDefine:嚴格define()或shim exports -------未實踐

  require.config({
         enforceDefine:true    //設置爲true-----加載的腳本必須是經過define()定義或者配置shim有exports值，不然拋出錯誤；
     })

  xhtml：建立script元素-------未實踐

  require.config({
         xhtml:true    //設置爲true-----調用document.createElementNS()建立script元素；
     })

  urlArgs:本地開發環境應對強緩存方案；-------未實踐

  //添加額外的查詢字符串到RequireJS獲取資源的URLs上；
     //部署代碼的時候要確保刪除此配置；
     requirejs.config({
         //module ID和URL做爲參數；
         urlArgs: function(id, url) {
             var args = 'v=1';
             if (url.indexOf('view.html') !== -1) {
                 args = 'v=2'
             }
         //返回字符串添加到URL的後面；
             return (url.indexOf('?') === -1 ? '?' : '&') + args;
         }
     });

  scriptType:設置腳本type屬性-------未實踐

  requirejs.config({
     //RequireJS添加的script標籤type默認爲‘text/javascript’；
         scriptType: ‘text/javascript;version=1.8’   
     });

  skipDataMain:忽略 data-main屬性；-------未實踐

  requirejs.config({
     //設置爲true，跳過data-main屬性掃描加載模塊；
     //若是兩個加載RequireJS的程序有嵌套關係，被嵌套的不該該有data-main屬性？？？？？？？沒懂
         skipDataMain: true   
     });

  疑問：求各位大神解答

  哪些腳本符合AMD規範；
     哪些AMD庫call define() after they also create a global (like jQuery or lodash)
     怎麼用mainConfigFile build option來指定shim config
     怎麼生成依賴關係表；
     map屬性只能用純module IDs做爲鍵名------純module IDs?----------------以paths鍵名開始的路徑？
     bundles----Note that the keys and values are module IDs--------------values的module IDs是從哪來的，define('module IDs')??????
     context:怎麼用
     package:怎麼用
     skipDataMain：若是兩個加載RequireJS的程序有嵌套關係，被嵌套的不該該有data-main屬性？？？？？？？沒懂