requirejs：模块加载(require)及定义(define)时的路径理解

给新来的实习生普及下JS基本知识，看到比较好的文章

转载https://blog.csdn.net/xuxiaoping1989/article/details/52384778

接触过requirejs的童鞋可能都知道，无论是通过define来定义模块，还是通过require来加载模块，模块依赖声明都是很重要的一步。而其中涉及到的模块路径解析，对于新手来说，有的时候会让人觉得很困惑。

假设我们的目录结构如下：

demo.html 
js/require.js 
js/main.js 
js/lib.js                               =>alert('js/lib')
js/util.js                              =>alert('js/util')
js/common/lib.js              =>alert('s/common/lib')
js/common/jqury/lib.js    =>alert('js/common/jqury/lib')
common/lib.js                  =>alert('common/lib')

baseUrl ：基础中的基础
在requirejs的模块路径解析里， baseUrl 是非常基础的概念，离开了它，基本就玩不转了，所以这里简单介绍一下。简单的说， baseUrl 指定了一个目录，然后requirejs基于这个目录来寻找依赖的模块。
举个栗子，在demo.html里加载requirejs，同时在requirejs所在的script上声明 data-main 属性，那么，requirejs加载下来后，它会做两件事件：
1)、加载js/main.js
2)、将baseUrl设置为data-main指定的文件所在的路径，这里是 js/

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

那么，下面依赖的lib模块的实际路径为 js/lib.js

1.  
   require(['lib'], function(Lib){
2.  
   // do sth
3.  
   });

当然，除了 data-main 属性，你也可以手动配置 baseUrl ，比如下面例子。需要强调的是：
如果没有通过 data-main 属性指定 baseUrl ，也没有通过config的方式显示声明 baseUrl ，那么 baseUrl 默认为加载requirejs的那个页面所在的路径
index.html  （此时的baseUrl 指向index.html所在路径, ）

1.  
   <script src="js/require.js"></script>
2.  
   <script src="js/main.js"></script>

main.js

1.  
   require(['js/lib'], function(lib){
2.  
   <pre name="code" class="html"><span style="white-space:pre"></span>lib.lib() //'js/lib'

});

baseUrl  +  path ：让依赖更简洁、灵活
比如我们加载了下面一堆模块（好多水果。。。），看着下面一长串的依赖列表，可能你一下子就看出问题来了：
1)、费力气：每个加载的模块前面都有长长的 common/fruits
2)、难维护：说不定哪一天目录名就变了（在大型项目中并不算罕见），想象一下目录结构变更带来的工作量

1.  
   requirejs.config({
2.  
   baseUrl: 'js'
3.  
   });
4.  
   // 加载一堆水果
5.  
   require(['common/fruits/apple', 'common/fruits/orange', 'common/fruits/grape', 'common/fruits/pears'], function(Apple, Orange, Grape, Pears){
6.  
   // do sth
7.  
   });

对一个模块加载器来说，上面说的这两点问题显然需要考虑进去。于是requirejs的作者提供了 paths 这个配置项。我们看下修改后的代码。

1.  
   requirejs.config({
2.  
   baseUrl: 'js',
3.  
   paths: {
4.  
   fruits: 'common/fruits'
5.  
   }
6.  
   });
7.  
   // 加载一堆水果
8.  
   require(['fruits/apple', 'fruits/orange', 'fruits/grape', 'fruits/pears'], function(Apple, Orange, Grape, Pears){
9.  
   // do sth
10.  
    });

其实就少了个 common 前缀，也没节省多少代码，但当项目结构变更时，好处就体现了。假设 common/fruits 某一天突然变成了 common/third-party/fruits ，那很简单，改下 paths 就可以了。

1.  
   requirejs.config({
2.  
   baseUrl: 'js',
3.  
   paths: {
4.  
   fruits: 'common/third-party/fruits'
5.  
   }
6.  
   });