RequireJS配置项笔记

读不顺中文文档，对应中文文档，自行翻译的……如果有问题/错误，欢迎指点；

修改配置选项：

方法一、
    <script src='require.js'></script>
    <script>
        require.config({
            //在顶级HTML页面或顶级脚本文件（没有定义define()模块的脚本文件）中配置；
        })
    </script>
    
方法二、
    在主模块中配置；
        缺点：主模块异步加载，多入口的话，会随机报错；
        
方法三、
    <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属性？？？？？？？没懂