RequireJS配置项笔记

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

修改配置选项:

方法一、
    
    
    
方法二、
    在主模块中配置;
        缺点:主模块异步加载,多入口的话,会随机报错;
        
方法三、
    
    
    

支持的配置选项:

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设置依赖环境-------未实践

       
       
       

    callback:在deps加载完成后执行的程序-------未实践

       
       
       

    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属性???????没懂
    

你可能感兴趣的:(requirejs,javascript)