requireJS 路径解析问题

requirejs 路径解析问题

  • 在requirejs的模块路径解析里,baseUrl是非常基础的概念。简单的说,baseUrl指定了一个目录,然后requirejs基于这个目录来寻找依赖的模块。

  • 举个例子,在00.html里加载requirejs,同时在requirejs所在的script上声明data-main属性,那么requirejs加载下来后,它会做两件事情

    • 加载…/00.js文件
    • 将baseUrl设置为data-main指定的文件所在的路径,这里指代…/
      那么,下面所注入的模块的实际路径为../public/js/data.js
    require(['public/js/data'],function(data){
        console.log(data);
    })
    
  • 除了data-main属性,我们也可以手动配置baseUrl属性,例如

    require.config({
    baseUrl:'../common'
    })
    
    require(['com'],function(com){
        console.log(com());
    })
    
    • 这里有一个注意点:使用baseUrl时,可以设置绝对路径,也可以设置相对路径;绝对路径自然不必多说,但是相对路径就有一些值得注意的问题了
      • 当我们给baseUrl设置相对路径时,这里的相对路径相对的是引入require.js的页面,而不是require.config代码所在的模块

baeUrl+paths可以让模块注入更加简洁,灵活

  • 比如,下面的例子:这个案例中我们注入了一堆模块,这种写法会有两种弊端
    ​ - 费事:每个模块前都有public/js
    ​ - 难维护:如果有一天,目录结构变了,很难想象这会带来多么巨大的工作量

    require.config({
    baseUrl:'../'
    })
    
    require(['public/js/aa','public/js/bb','public/js/cc','public/js/dd'],function(data,edit,init,query){
        
    })
    
    • 对于一个模块加载器来说,显然要考虑到以上两点问题,于是requirejs的作者为我们提供了paths这一配置项。以下是修改后的代码
    require.config({
    baseUrl:'../',
    paths:{
        'js':'public/js'
    }
    })
    
    require(['js/aa','js/bb','js/cc','js/dd'],function(aa,bb,cc,dd){
    
    })
    

    这种写法其实也没省多少代码,但是当项目结构发生改变的时候,好处就体现了,我们只需要修改paths配置项中的路径就可以了,这为项目开发和后期维护提供了便捷

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