你不得不了解的requirejs中的路径解析

最近准备将自己的项目替换为requirejs，在使用requirejs的过程中，模块的路径解析踩了一波坑，于是在这里记录一下。
requirejs中使用关于路径解析的配置主要有以下方面：通过requirejs.config配置、使用data-main属性声明、基于html文件的路径。
基于html文件的路径这里不做过多解释，就是所有的路径解析是基于这个html文件路径，这在实际项目中可能并不常见。

requirejs.config中主要涉及两个关键字段，即baseUrl和paths，而baseUrl是指定所有的模块都是基于这个路径的来寻找依赖的模块的。如有以下路径关系：

main模块依赖于hello模块，配置baseUrl:js/；加载时下面这样写即可正确解析：

requirejs.config({
      baseUrl:'js/'
    });
requirejs(['main'], function(main) {
})

requirejs中可以使用相对路径和绝对路径，绝对路径需要注意的是使用需要添加上.js后缀，不然无法解析。我们重点关注一下相对路径。
上文中的路径假设为以下目录结构：

baseUrl依旧不变，加载修改为以下内容：

requirejs(['./main/main'], function(main) {
    })

这时使用开发者工具可以看到并没有报错，说明解析正确，这时相对路径是以js/路径为基础的，

我们再来看看加载模块时模块的依赖模块的相对路径情况，将代码修改为以下内容：

requirejs.config({
      baseUrl:'js/',
      paths: {
        main: "main/main"
      },
      shim:{
        main:{exports: 'main'}
      }
    });
    requirejs(['main'], function(main) {
      console.log(main);
    })

main模块引入hello模块，如下：

define('main',['hello'], function(hello){
  hello.fun1();
  return {main: hello.fun1()};
});

在浏览器端可以看到此时报错：

改为相对路径./，如下

define('main',['./hello'], function(hello){
  hello.fun1();
  return {main: hello.fun1()};
});

报错依旧，说明此时相对路径是基于baseUrl的，不管是加载的主模块还是模块依赖的模块。

接下来再来看看paths，paths从上文中可以看到是基于baseUrl进行路径的join的，如果在在引入时使用相对路径如下：

requirejs(['./main'], function(main) {
      console.log(main);
    })

浏览器不报错，说明相对路径是基于join后的路径的。
如果没有设置baseUrl，就可以看到报错，如下：

说明此时的baseUrl被设置为了基于当前页面的路径。
此时设置一下data-main属性，如下：

<script data-main="js/main/hello.js" src="js/require.js"></script>

此时报错为

说明此时baseUrl是基于data-main属性的。
如果此时同时设置了baseUrl属性为js/，可以看到报错为：

说明此时data-main属性设置的路径被替换为了baseUrl。

基于以上的种种报错，我们可以得出一个结论就是：baseUrl是最高级的，data-main是次级的，当前页面是最低级的。baseUrl的设置依次按照以上高低级方式设置，而相对路径就是相对于baseUrl的。

不过这也带来一个问题就是在工程上，模块的复用非常常见，baseUrl可能随着页面而变，因此使用相对路径会有一定风险，而避免这种风险的方式就是使用data-main属性引入主模块，或者使用baseUrl+paths的方式，按照原作者的意思还是使用data-main方式最好。