關鍵要點
RequireJS是一個用於瀏覽器的AMD模塊加載器，可以異步加載腳本和CSS文件。您不再需要處理單個文件（例如index.html）中腳本文件的順序。相反，您只需將代碼包裝在模塊定義中，RequireJS將負責依賴項管理，使您的代碼結構更清晰，組織更合理。它還有一個優化工具，可以壓縮和連接用於生產環境的文件。
官方網站提供了關於其API的詳盡文檔，並且有很多示例代碼庫可以幫助您。但是，它有很多配置，一開始使用RequireJS會比較棘手。
在本文中，我們將學習如何通過使用AMD模塊構建庫、對其進行優化並使用RequireJS優化器將其導出為獨立模塊來使用RequireJS。稍後，我們將使用RequireJS構建應用程序並使用我們的庫。
本教程假設您對RequireJS有一定的了解。如果您正在尋找入門指南，請查看：理解RequireJS以實現有效的JavaScript模塊加載。
安裝RequireJS
RequireJS可通過bower安裝：
bower install requirejs --save
或者您可以從github獲取文件。
還有一個基於Grunt的Yeoman生成器用於RequireJS項目。
定義AMD模塊
我們將代碼包裝在define()中，這將使其成為一個AMD模塊。
文件：mylib.js
define(['jquery'], function($) {
// $现在是jquery。
return 'mylib';
});就是這樣。請注意，define()接受一個可選的第一個參數，即依賴項數組，在本例中為['jquery']。它是此模塊的依賴項列表。數組中的所有模塊都將在此模塊之前加載。執行此模塊時，參數是依賴項數組中的相應模塊。
因此，在本例中，將首先加載jQuery，然後將其作為參數$傳遞到函數中，然後我們可以在模塊中安全地使用它。最後，我們的模塊返回一個字符串。返回值是在需要此模塊時傳遞給函數參數的內容。
引用其他模塊
讓我們通過定義第二個模塊並引用我們的第一個模塊mylib.js來看看它是如何工作的。
文件：main.js
bower install requirejs --save
您可以在依賴項數組中引用任意數量的依賴項，並且所有模塊都將按相同的順序通過函數參數提供。在這個第二個模塊中，我們引用了jquery和mylib模塊，並簡單地返回了一個對象，公開了某些變量。此庫的用戶將使用此對像作為您的庫。
配置RequireJS優化器：r.js
您可能想知道，RequireJS僅通過查看依賴項數組中的字符串如何知道要加載哪個文件？在我們的例子中，我們提供了jquery和mylib作為字符串，RequireJS知道這些模塊在哪裡。 mylib很簡單，它是mylib.js，省略了.js。
jquery呢？這就是RequireJS配置的用途。您可以通過RequireJS配置提供廣泛的配置。有兩種方法可以提供此配置，因為我們使用的是RequireJS優化器，我將向您展示r.js方法。 r.js是RequireJS優化器。
我們將向r.js提供一個配置，它將所有模塊優化到單個文件中。我們提供的配置將使r.js將模塊構建為獨立的全局庫，既可以作為AMD模塊使用，也可以在瀏覽器中作為全局導出使用。
r.js可以通過命令行或作為Node模塊運行。還有一個用於運行優化器的Grunt任務grunt-requirejs。
話雖如此，讓我們看看我們的配置是什麼樣的：
文件：tools/build.js
define(['jquery'], function($) {
// $现在是jquery。
return 'mylib';
});配置文件實際上是RequireJS的核心。一旦您了解了這些參數的工作原理，您就可以像專業人士一樣使用RequireJS。
您可以執行不同的操作，並使用配置文件調整項目構建。要了解有關配置和RequireJS的一般信息，建議您參考文檔和wiki。還有一個示例配置文件，演示瞭如何使用構建系統，因此請務必也參考該文件。
最後，我們實際上運行了優化器。正如我之前所說，您可以通過命令行或Node以及Grunt任務運行它。請參閱r.js自述文件以了解如何在不同的環境中運行優化器。
define(['jquery', 'mylib'], function($, mylib) {
// $照常是jquery
// mylib是字符串`mylib`，因为这是第一个模块的返回值
//
return {
version: '0.0.1, jQuery版本：' + $.fn.jquery,
mylibString: mylib
}
});這將在dist/mylib.js中生成構建文件
build.js
接下來，讓我們看看這些參數的實際含義。
baseUrl – 所有模塊查找的根路徑。
paths – 相對於baseUrl的模塊名稱的路徑映射。
在我們的示例中，“mylib”映射到“../main”，它相對於baseUrl，因此當我們引用“mylib”時，它加載文件“../lib/../mylib/main .js”。請注意，我們附加了baseUrl，然後是paths設置，然後是模塊名稱，後跟.js後綴。您可以在其中指定模塊如何映射到文件，例如jquery和mylib。
include – 我們想要包含在優化過程中的模塊。包含的模塊所需的依賴項會隱式包含。在我們的例子中，main模塊依賴於mylib和jquery，它們也將被包含在內，因此無需顯式包含它。我們還包含稍後將提到的almond。
exclude – 我們想要從優化過程中排除的模塊。在我們的例子中，我們排除了jquery。構建庫的使用者將提供一個jQuery庫。稍後我們將看到這一點。
out – 優化的輸出文件的名稱。
wrap – 將構建包包裝在wrap指定的開始和結束文本中。優化的輸出文件如下所示：wrap.start 包含的模塊 wrap.end。 wrap.start和wrap.end是其內容包含在輸出中的文件名稱。
almond
構建的庫不包含require.js文件，而是使用almond。 almond是一個小型AMD API實現，它將替換require.js。
包裝我們的庫
在r.js配置中，我們使用wrap.start和wrap.end文件包裝了我們的庫。我們還在庫中包含了almond，這些將使我們的庫獨立，因此它們可以通過瀏覽器全局變量使用，也可以通過requirejs作為AMD模塊使用。
文件：wrap.start
bower install requirejs --save
我們包含的模塊main、mylib和almond位於wrap.start和wrap.end的中間。
文件：wrap.end
define(['jquery'], function($) {
// $现在是jquery。
return 'mylib';
});如果使用者使用AMD加載器，則構建的文件將請求“jquery”作為AMD依賴項。如果使用者只使用瀏覽器全局變量，則庫將獲取$全局變量並將其用於jQuery依賴項。
使用RequireJS使用庫
我們的庫已經完成了，現在讓我們通過構建一個requirejs應用程序來實際使用它。
文件：app.js
define(['jquery', 'mylib'], function($, mylib) {
// $照常是jquery
// mylib是字符串`mylib`，因为这是第一个模块的返回值
//
return {
version: '0.0.1, jQuery版本：' + $.fn.jquery,
mylibString: mylib
}
});這裡沒有什麼特別的，它只是另一個引用jQuery和mylib的模塊。當使用define定義模塊時，它不會立即執行，也就是說，它的回調函數（在依賴項數組之後傳遞）不會立即執行。這意味著我們的應用程序不會僅僅通過定義此模塊而啟動。現在讓我們看看如何配置RequireJS並實際執行這個模塊，即我們的應用程序。
為瀏覽器配置RequireJS
我們將在一個文件中配置RequireJS並執行我們的app模塊。不過，也有不同的方法可以做到這一點。
文件：common.js
{
"baseUrl": "../lib",
"paths": {
"mylib": "../main"
},
"include": ["../tools/almond", "main"],
"exclude": ["jquery"],
"out": "../dist/mylib.js",
"wrap": {
"startFile": "wrap.start",
"endFile": "wrap.end"
}
}baseUrl和paths配置與之前相同。這裡附加的配置值是：
shim: 配置傳統“瀏覽器全局”腳本的依賴項和導出，這些腳本不使用define()來聲明依賴項並設置模塊值。例如，Backbone不是AMD模塊，但它是一個瀏覽器全局變量，它將Backbone導出到我們已在exports中指定的全局命名空間。在我們的示例中，模塊還依賴於jQuery和Underscore，因此我們使用deps指定它。 deps數組中的腳本在加載Backbone之前加載，加載後，exports值將用作模塊值。
請注意，您也可以在此應用程序項目中使用r.js，這將需要單獨的配置。但不要為此感到困惑。我不會詳細介紹如何操作，但這與我們對庫所做的類似。請參閱示例構建配置以了解更多信息。
require與define
稍後我們將使用require加載模塊並立即執行它。有時define和require可能會混淆使用哪個。 define定義一個模塊，但不執行它，require定義一個模塊並執行它——也就是說，它在執行自身之前加載並執行依賴模塊。通常，您將有一個require作為主入口模塊，它將依賴於通過define定義的其他模塊。
加載腳本
通常，您會在index.html中包含所有腳本文件。現在我們使用RequireJS，我們只需要包含RequireJS並指定我們的data-main，它是我們應用程序的入口點。設置配置選項或分離在index.html中使用的主模塊的方法有很多種。您可以在此處找到更多信息。
bower install requirejs --save
結論
在本文中，我們使用RequireJS構建了一個庫和一個使用該庫的應用程序。我們學習瞭如何配置r.js優化器以及如何在瀏覽器中配置RequireJS。最後，我們學習瞭如何使用RequireJS定義和使用AMD模塊。這使我們的代碼結構良好且組織有序。
在本教程的前半部分（配置優化器），我使用了這個example-libglobal存儲庫，後半部分並不復雜，因此您現在應該能夠自己動手了。
官方RequireJS網站是最終文檔，但請務必查看github上的示例存儲庫以及該存儲庫中的示例項目，這些項目演示了RequireJS應用程序的使用。
關於使用RequireJS構建庫的常見問題解答（FAQ）
RequireJS在JavaScript開發中的主要目的是什麼？
RequireJS是一個JavaScript文件和模塊加載器。它針對瀏覽器使用進行了優化，但也可以在其他JavaScript環境中使用。 RequireJS的主要目的是鼓勵在JavaScript中使用模塊化編程。它幫助開發人員管理JavaScript文件之間的依賴關係並模塊化其代碼。這導致更好的代碼組織、可維護性和可重用性。它還可以提高代碼的速度和質量。
RequireJS如何處理JavaScript文件依賴關係？
RequireJS使用異步模塊定義 (AMD) API 來處理 JavaScript 模塊。這些模塊可以異步加載，這意味著它們不會阻塞其他腳本在加載時運行。當您使用 RequireJS 定義模塊時，您會指定其依賴項。然後，RequireJS 會確保在模塊本身之前加載這些依賴項。
如何使用RequireJS定義模塊？
要在RequireJS中定義模塊，您可以使用define()函數。此函數接受兩個參數：一個依賴項數組和一個工廠函數。依賴項是模塊所依賴的文件的路徑。工廠函數是您編寫模塊代碼的地方。一旦所有依賴項都加載完畢，就會調用此函數。
如何在代碼中使用用RequireJS定義的模塊？
要使用用RequireJS定義的模塊，您可以使用require()函數。此函數接受兩個參數：一個依賴項數組和一個回調函數。依賴項是您要使用的模塊的路徑。回調函數是您使用模塊的地方。一旦所有模塊都加載完畢，就會調用此函數。
我可以將RequireJS與其他JavaScript庫（如jQuery）一起使用嗎？
是的，您可以將RequireJS與其他JavaScript庫（如jQuery）一起使用。 RequireJS有一個內置功能，用於加載不使用define()來聲明依賴項並設置模塊值的傳統非模塊化腳本，稱為“shim”。使用shim，您可以為不使用define()來聲明依賴項和設置模塊值的腳本指定依賴項和導出。
如何使用RequireJS優化我的代碼？
RequireJS帶有一個名為r.js的優化工具。此工具將您的JavaScript文件及其依賴項組合併壓縮到單個文件中。這減少了HTTP請求的數量和文件的大小，這可以大大提高網頁的加載時間。
RequireJS中define()和require()的區別是什麼？
define()函數用於定義模塊，而require()函數用於加載模塊。這兩個函數都接受一個依賴項數組和一個函數作為參數。但是，傳遞給define()的函數用於創建模塊值，而傳遞給require()的函數用於在模塊加載後運行代碼。
我可以在Node.js中使用RequireJS嗎？
是的，您可以在Node.js中使用RequireJS。但是，Node.js有自己的模塊系統，因此您可能不需要RequireJS。如果您想在瀏覽器和Node.js中都使用相同的代碼，或者如果您更喜歡AMD API，那麼RequireJS可能是一個不錯的選擇。
如何處理RequireJS中的錯誤？
RequireJS提供了一個onError回調來處理錯誤。當加載模塊時出現錯誤時，會調用此回調。您可以使用此回調來記錄錯誤或從中恢復。
我可以使用RequireJS加載CSS文件嗎？
是的，您可以使用require-css插件使用RequireJS加載CSS文件。此插件允許您加載和等待CSS文件，就像您使用JavaScript模塊一樣。
以上是用requirej構建圖書館的詳細內容。更多資訊請關注PHP中文網其他相關文章！
