首先大家要知道requirejs是干嘛用的，要解釋，那就用一句話說下：RequireJS是一個JavaScript文件和模塊加載器
接下來我們開始學會配置使用requireJs，當然在學習使用的過程中也遇到了很多坑，不管是百度還是什么方法最終解決了，所以分享給大家，也方便下次使用時忘掉！
1、首頁看一下我自己建的項目目錄結構，這對接下來配置requireJs有很大的作用
2、下載requireJs及requireJs-text.js，將requirejs引入html文件中
設置async="true"的作用很明顯和jq的ajax中async：true的目的是一樣的，就是一邊加載RequireJs一邊執行它，如果設置為false的話則會等待ReuireJs完全加載完成采取執行它的方法，這會有很大可能導致頁面剛開始一片空白，對於一個開發者來說，好像不是很友好。當然如果你script標簽不在head里而在頁面的最尾部，那你設不設置都是一樣的，因為他最好才會加載，我並不建議大家這樣做；data-main="scripts/main"的作用是申明RequireJs會去scripts目錄下去找main.js文件，通常main.js是項目目錄以及全局配置文件，這里也不例外
3、接下來我們該設置全局配置以及文件路勁了（main.js）
baseUrl 是設置你項目的路徑，在接下來的路勁配置中都會以baseUrl設置的路勁作為相對路徑去查找，請注意，這是我的文件目錄下，我的require.js和全局配置文件（main.js）都是放在scripts目錄下的
paths 是預加載js文件的配置項，一般情況都是不用寫后綴名的，當然你的注意你的文件路勁，這里是我的文件路徑，我的所有本地腳本都放在了js文件夾下，所以就是相對baseUrl的路徑的上一目錄的js目錄下，
你也可以引入html文件，在引入hrml文件是你的確保你已經有並且引入text.js文件了，當然我把text.js放在了scripts目錄下，所以之間去找同級就可以了
waitSeconds 設置的數值的作用的在這個時間段內如果沒有加載成功或路徑沒有找到RequireJs會自己認為加載失敗
4、現在我們看看如何引入css全局文件以及按需加載響應文件
就像圖片上看到的一樣，必須設置map為全局（*）配置css的引入js，我的這個js文件顯然是放在baseUrl的同級目錄下的，文件名為：css.min，這個是引入css必須的文件
加下來你會看到shim選項下有一個Btn數組配置了一堆css路勁，而這個Btn你也會發現在paths選項下我有配置，引入了自己的一個js，在這個js（Setting.js）是我項目必須要使用到的全局js文件，可以是我自己封裝的方法以及第三方方法之類的，使用它做鍵值名的原因就是當我執行或者使用這個js文件是，下面數組里我配置的css文件就會全部引入到頁面，好處很明顯就是可以用作全局樣式的引入
下面的bootstrap以及swiper的就是按需加載方法的例子，前面的jquery說明bootstrap是要依賴於jquery的，使用css!的方法就是會去相對路徑去找這個css，而你會發現bootstrap的對象名適合上面paths配置項下的bootstrap的配置名是一致的，特別需要注意的是你的文件的路徑，這里是我的項目目錄所對應的文件路徑。
當然你也可以使用這種方法去當個加載一個css樣式，但是這是非常麻煩的
define(["require"], function(require) {
var cssUrl = require.toUrl("./css/Style.css");
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = cssUrl;
document.getElementsByTagName("head")[0].appendChild(link);
});
5、接下來就是你該如何使用剛才配置的js以及css了
Requirejs提供的方法很簡單
require( ['jquery','bootstrap','Btn'],function($,bootstrap,Btn) {
console.log(Btn)
$('#Nav').html('style'me)
})
你會發現對象的參數都是你剛才配置文件路徑起的名字，就是jquery,后面函數的參數適合對象里的參數一一對應的，像jquery使用的是$，那我們傳$就代表着在方法內我們已經可以使用jquery方法了，Btn是我的全局本地js文件，不做任何操作只需要引進來就行了，這時候我們在Btn配置的js中也就是Setting.js直接可以使用jquery的方法了，也就是啟動了RequireJs，看圖，bootstrap已經可以用了
而且我Setting.js的方法生效啦
瀏覽器顯示點擊黑色的盒子已經執行的方法
6、接下來就是如何引入以及使用html的模板了
首先你會看到我已經在paths下配置過兩個html頁面了，名字分別為page1和page2，在這個基礎上配置了text的選項，因為引入html文件是依賴text.js的
用法也很簡單，跟啟動RequireJs一樣的，需要傳參到數組里，並且在函數里傳入相應的參數就可以使用了
這是text.html和test1.html兩個文件
參數接收傳入直接使用
require( ['jquery','bootstrap','Btn','text!page1','text!page2'],function($,bootstrap,Btn,template,template1) {
$('#Btn').bind('click',function(){
$('#Nav').html(template)
})
$('#Btn1').bind('click',function(){
$('#Nav').html(template1)
})
})
點擊兩個按鈕可以分別加載不同的html模板到頁面來也是不錯的
嗯，就先說這些，當然還有很多，比如說r.js打包，build.js配置，歡迎留言交流！
//想一起學習交流的歡迎來qq群：565996731
（申請注明來自博客園）