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.  
   });

7.