美文网首页
模块化:require.js及r.js基础

模块化:require.js及r.js基础

作者: 柯良勇 | 来源:发表于2016-05-23 22:18 被阅读78次

    require js的基本配置文件格式如下:

        requirejs.config({
          baseUrl: "src/js",  
          paths: {
            'jquery': 'lib/bower_components/jquery/dist/jquery.min'
          }
        });
    

    baseUrl作用:给后续所引用的模块自动添加一个前缀,也就是说后续所引用的模块的地址是在此url基础上加引用时的小部分路径构成的。
    baseUrl的基准:以引用config的那个html文件的所在目录为基准。
    paths的作用:为一些跨baseUrl目录在当前目录下路径较长的模块做路径设置,在引用有设置paths的模块时,会用baseUrl+paths作为路径去获取模块。
    paths的用法:例如,大部分模块在module中,而我的jquery因为分类是库,所以放在lib下了,此时baseUrl兼顾大众需求设为'js/module',而对于jquery因为不在module下所以我在paths中单独给它设路径为'../lib/jquery'

    requirejs.config({
        baseUrl:'js/module',
        paths:{
            jquery:'../lib/jquery'
        }
    });
    

    r.js 的打包配置文件格式如下:

    ({
        baseUrl: "./src/js",
        paths: {
            'jquery': 'lib/bower_components/jquery/dist/jquery.min'
        },
        name: "main",
        out: "dist/js/merge.js"
    })
    

    baseUrl:这个baseUrl是基础路径,它的任务是搭配paths或下方name、out的路径来找到对应的模块、解析起始点(即name)、输出位置(即out),它是以自身所在目录为基准的。
    name:是解析入口,搭配上面的baseUrl拼接出路径,拼接出的路径要指向require.js的配置文件;图中的解析入口就是"./src/js/main.js",从main.js开始解析打包。

    相关文章

      网友评论

          本文标题:模块化:require.js及r.js基础

          本文链接:https://www.haomeiwen.com/subject/fwcarttx.html