從零開始···require.js加載css文件插件require-css

require.js因爲默認加載的文件都是js文件，所以如果要加載css文件的話就得藉助插件了。
這裏搜索了一下，發現require-css這個插件用的最多，所以隨大流看一下這個插件怎麼用。
首先當然下載js文件，這個可以去github搜索項目地址下載。
將js文件放入工程目錄後，接下來就是敲代碼了。

require.config(
        {
            paths: {
                'jquery': 'js/jquery-3.2.1',
                'bootstrap' : 'http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min',
            },
            map: {
                '*': {
                    'css': 'js/css'
                }
            },
            shim: {
                bootstrap: {
                    deps: [
                        'css!http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css'
                    ]
                }
            }
        }
    );
require(["bootstrap"]);

這裏在require.config()中添加兩個屬性，一個是map，一個是shim。
map屬性是require.js中一個映射的概念，它的主要作用是解決同名依賴的衝突。也就是兩個js文件都有一個名叫module的依賴，但其實依賴的js文件不一樣，那麼這裏就可以在map屬性中配置

map{
   'js1':{
      'module':'js-module1'
      },
   'js2':{
      'module':'js-module2'
      }
}

這裏js1和js2中加載的模塊就會分別指向正確的文件。
而我們這裏的配置就是表示所有的文件都會加載css.js這個文件。
shim屬性則是require.js專門用來加載非規範的模塊，這裏就是用這個屬性來加載css文件。deps表示依賴的文件或模塊。
不過這裏要在地址前加上css!作爲標誌。
這裏有一點要注意的是：
1.可以看到這裏bootstrap.js和bootstrap.css的模塊名稱都一樣，所以加載的時候一個require(‘bootstrap’)就可以了。但是如果這裏bootstrap不一樣，比如bootstrap.css的名稱是a的話，這裏require(‘a’)還會加載一個a.js文件，當然是沒有這個文件導致加載失敗。或者會加載可能存在的但你不需要的文件。所以這裏的模塊名稱最好和有依賴關係的js文件一樣。
2.在上一節的內容中我是單獨加載兩個js模塊的，後來繼續寫代碼發現無法使用jquery的方法，$對象不存在。後來發現是自己粗心了。

define(['jquery'],function($){
    useAjax();
});

這裏define方法會接受兩個參數，一個是依賴的模塊，一個是一個函數對象，函數中的參數就是所以來的模塊對象，這樣就可以使用模塊的方法了。
測試：

可以看到這裏成功加載了需要的js和css文件。不過可以注意這裏的加載順序，define方法中jquery模塊首先加載，然後是map中設置的css模塊。而bootstrap模塊先加載的是css文件，在執行了define方法的ajax後才加載了bootstrap的js文件。具體原因我還沒搞清楚，不過在使用require.js的時候還是要需要注意下這個加載的順序，以免導致錯誤。