requireJS 路径解析问题

requirejs 路径解析问题

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

• 举个例子，在00.html里加载requirejs，同时在requirejs所在的script上声明data-main属性，那么requirejs加载下来后，它会做两件事情
  <script data-main="../00.js" src="../require.js"></script>

  • 加载…/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配置项中的路径就可以了，这为项目开发和后期维护提供了便捷