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属性???????没懂
    
    原文作者:米花儿团儿
    原文地址: https://segmentfault.com/a/1190000004834924
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞