前言
對於像我這樣的requireJS剛開始學習的人而言，requireJS最難理解的部分應該是它的路徑問題。晚上隨便折騰了一下，算是略微理清了這個文件夾問題吧。
requireJS學習網址：requireJS中文網 requireJS英文網
requireJS簡單介紹
隨着前端代碼量的日益龐大和復雜的結構，以及越來越多框架的出現。怎樣有效的管理你的代碼，已經成為一個團隊亟待解決的問題。而RequireJS的目標是鼓舞代碼的模塊化，它使用了不同於傳統script標簽的腳本載入步驟。
能夠用它來加速、優化代碼，但其主要目的還是為了代碼的模塊化。RequireJS以一個相對於baseUrl的地址來載入全部的代碼。下圖是隨便寫的一個小的DEMO文件文件夾：
baseUrl模塊查找的根路徑
首先在index.html頁面中引入requireJS文件
<script src="js/lib/require.js" data-main="js/entry"></script>或者
<script src="js/lib/require.js"></script>引入requireJS文件，能夠須要接下來文件的主入口屬性data-main。也能夠不須要。
無data-main屬性
假設沒有data-main屬性。則baseUrl默覺得引入requireJS文件的HTML所處的位置，上述代碼中為“wechart/”。
有data-main
假設有data-main屬性，則baseUrl默覺得data-main屬性值中的文件文件夾，上述中即為“js”。
config中設置
能夠在require.config({})中明白設置。
DEMO中把相關的配置寫進了主入口文件即entry.js中
require.config({
baseUrl: "js/",
paths: {
jquery: "lib/jquery/jquery-1.7.1"
}
});baseUrl的文件夾不是以“/”或者相關協議（如http或https）開頭，則默覺得相對路徑。比如我們把上面baseUrl改成“/js/”,則就變成相對於磁盤的根文件夾啦。
這里能夠看到jquery和a兩個文件沒有正確載入。原因是文件夾相對於c盤了。其余模塊正常載入原因繼續向下看。
上面所說的baseUrl文件夾，都是僅僅在定義模塊時用到的路徑。
如a.js文件：
define(['jquery'], function($) {
return function() {
$("#test").html("<p>aaa</p>");
}
});模塊a中的文件依賴jquery。須要先載入jquery之后才干運行模塊里面的回調函數。而jquery的模塊查找完整路徑即為entry.js里面的baseUrl+paths配置文件夾(paths詳細配置可參考官網相關介紹)，即為**”wechart/js/lib/jquery/jquery-1.7.1.js”。
ps：requireJS內部默覺得須要載入的js文件加入后綴名“.js”，所以能夠省略對應的后綴名。假設配置中給jquery加入后綴名。則會出現兩個”.js”。
對於一個模塊載入還有一個模塊的文件夾問題
DEMO中我的模塊b依賴於模塊a：
define(['jquery','my/a'], function($, a) {
a();
console.log("bbb");
});則模塊b載入前載入模塊的文件夾為baseUrl+依賴中定義的文件夾，上述載入模塊a的文件夾為js/my/a.js。因為模塊a的路徑也須要依據baseUrl來查找。所以上面baseUrl更改成“/js/”時，模塊a也載入出錯。
HTML中require相關模塊的路徑問題
require中相關模塊路徑查找為baseUrl+require依賴中所給文件夾
可是，
因為require內部模塊載入機制為異步載入，所以對應的baseUrl需區分下面情況
有主入口文件且為配置文件
因為上面敘述過，假設有data-main,且文件中有baseUrl配置。則baseUrl應為配置中的“js/”,但因為requireJS異步載入機制。主入口文件須要在HTML的全部script文件載入后才開始載入，即在require運行載入模塊時。對應的主入口文件entry.js尚未被載入。
則此時的baseUrl仍為主入口的文件文件夾。所以HTML中載入模塊b時須要使用“../”進入“js/”文件夾。
DEMO中index.html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="test">111</div>
<script src="js/lib/require.js" data-main="js/entry/entry"></script>
<script> require(['../my/b'], function(b) { console.log("b has been called"); }); </script>
</body>
</html>無主入口文件
把對應的配置文件代碼放在載入模塊代碼前。則此時的baseUrl即為配置中的文件夾。對應的HTML代碼更改為
<script> require.config({ baseUrl: "js/", paths: { jquery: "lib/jquery/jquery-1.7.1" } }); require(['my/b'], function(b) { console.log("b has been called"); }); </script>對於無配置文件的情況不利於代碼的后期維護，果斷省略。
。。