關(guān)鍵要點(diǎn)

• RequireJS是一個(gè)用於瀏覽器的AMD模塊加載器，它異步加載腳本和CSS文件，管理依賴項(xiàng)並構(gòu)建代碼結(jié)構(gòu)。它還包含一個(gè)用於生產(chǎn)環(huán)境的優(yōu)化工具。
• 使用RequireJS時(shí)，代碼需要包裝在模塊定義中。模塊可以在其他模塊中被引用，所有依賴項(xiàng)都將在模塊本身加載之前加載。
• RequireJS優(yōu)化器r.js可以配置為將所有模塊構(gòu)建到單個(gè)文件中。此配置還可以使模塊成為獨(dú)立的全局庫(kù)，既可以作為AMD模塊使用，也可以在瀏覽器中作為全局導(dǎo)出使用。
• RequireJS可用於構(gòu)建庫(kù)以及使用該庫(kù)的應(yīng)用程序。此過程涉及定義和使用AMD模塊、配置r.js優(yōu)化器以及在瀏覽器中配置RequireJS，從而生成結(jié)構(gòu)良好且組織有序的代碼。

RequireJS是一個(gè)用於瀏覽器的AMD模塊加載器，可以異步加載腳本和CSS文件。您不再需要處理單個(gè)文件（例如index.html）中腳本文件的順序。相反，您只需將代碼包裝在模塊定義中，RequireJS將負(fù)責(zé)依賴項(xiàng)管理，使您的代碼結(jié)構(gòu)更清晰，組織更合理。它還有一個(gè)優(yōu)化工具，可以壓縮和連接用於生產(chǎn)環(huán)境的文件。

官方網(wǎng)站提供了關(guān)於其API的詳盡文檔，並且有很多示例代碼庫(kù)可以幫助您。但是，它有很多配置，一開始使用RequireJS會(huì)比較棘手。

在本文中，我們將學(xué)習(xí)如何通過使用AMD模塊構(gòu)建庫(kù)、對(duì)其進(jìn)行優(yōu)化並使用RequireJS優(yōu)化器將其導(dǎo)出為獨(dú)立模塊來(lái)使用RequireJS。稍後，我們將使用RequireJS構(gòu)建應(yīng)用程序並使用我們的庫(kù)。

本教程假設(shè)您對(duì)RequireJS有一定的了解。如果您正在尋找入門指南，請(qǐng)查看：理解RequireJS以實(shí)現(xiàn)有效的JavaScript模塊加載。

安裝RequireJS

RequireJS可通過bower安裝：

bower install requirejs --save

或者您可以從github獲取文件。

還有一個(gè)基於Grunt的Yeoman生成器用於RequireJS項(xiàng)目。

定義AMD模塊

我們將代碼包裝在define()中，這將使其成為一個(gè)AMD模塊。

文件：mylib.js

define(['jquery'], function($) {
    // $現(xiàn)在是jquery。

    return 'mylib';
});

就是這樣。請(qǐng)注意，define()接受一個(gè)可選的第一個(gè)參數(shù)，即依賴項(xiàng)數(shù)組，在本例中為['jquery']。它是此模塊的依賴項(xiàng)列表。數(shù)組中的所有模塊都將在此模塊之前加載。執(zhí)行此模塊時(shí)，參數(shù)是依賴項(xiàng)數(shù)組中的相應(yīng)模塊。

因此，在本例中，將首先加載jQuery，然後將其作為參數(shù)$傳遞到函數(shù)中，然後我們可以在模塊中安全地使用它。最後，我們的模塊返回一個(gè)字符串。返回值是在需要此模塊時(shí)傳遞給函數(shù)參數(shù)的內(nèi)容。

引用其他模塊

讓我們通過定義第二個(gè)模塊並引用我們的第一個(gè)模塊mylib.js來(lái)看看它是如何工作的。

文件：main.js

bower install requirejs --save

您可以在依賴項(xiàng)數(shù)組中引用任意數(shù)量的依賴項(xiàng)，並且所有模塊都將按相同的順序通過函數(shù)參數(shù)提供。在這個(gè)第二個(gè)模塊中，我們引用了jquery和mylib模塊，並簡(jiǎn)單地返回了一個(gè)對(duì)象，公開了某些變量。此庫(kù)的用戶將使用此對(duì)像作為您的庫(kù)。

配置RequireJS優(yōu)化器：r.js

您可能想知道，RequireJS僅通過查看依賴項(xiàng)數(shù)組中的字符串如何知道要加載哪個(gè)文件？在我們的例子中，我們提供了jquery和mylib作為字符串，RequireJS知道這些模塊在哪裡。 mylib很簡(jiǎn)單，它是mylib.js，省略了.js。

jquery呢？這就是RequireJS配置的用途。您可以通過RequireJS配置提供廣泛的配置。有兩種方法可以提供此配置，因?yàn)槲覀兪褂玫氖荝equireJS優(yōu)化器，我將向您展示r.js方法。 r.js是RequireJS優(yōu)化器。

我們將向r.js提供一個(gè)配置，它將所有模塊優(yōu)化到單個(gè)文件中。我們提供的配置將使r.js將模塊構(gòu)建為獨(dú)立的全局庫(kù)，既可以作為AMD模塊使用，也可以在瀏覽器中作為全局導(dǎo)出使用。

r.js可以通過命令行或作為Node模塊運(yùn)行。還有一個(gè)用於運(yùn)行優(yōu)化器的Grunt任務(wù)grunt-requirejs。

話雖如此，讓我們看看我們的配置是什麼樣的：

文件：tools/build.js

define(['jquery'], function($) {
    // $現(xiàn)在是jquery。

    return 'mylib';
});

配置文件實(shí)際上是RequireJS的核心。一旦您了解了這些參數(shù)的工作原理，您就可以像專業(yè)人士一樣使用RequireJS。

您可以執(zhí)行不同的操作，並使用配置文件調(diào)整項(xiàng)目構(gòu)建。要了解有關(guān)配置和RequireJS的一般信息，建議您參考文檔和wiki。還有一個(gè)示例配置文件，演示瞭如何使用構(gòu)建系統(tǒng)，因此請(qǐng)務(wù)必也參考該文件。

最後，我們實(shí)際上運(yùn)行了優(yōu)化器。正如我之前所說，您可以通過命令行或Node以及Grunt任務(wù)運(yùn)行它。請(qǐng)參閱r.js自述文件以了解如何在不同的環(huán)境中運(yùn)行優(yōu)化器。

define(['jquery', 'mylib'], function($, mylib) {
    // $照常是jquery
    // mylib是字符串`mylib`，因?yàn)檫@是第一個(gè)模塊的返回值
    //

    return {
        version: '0.0.1, jQuery版本：' + $.fn.jquery,
        mylibString: mylib
    }
});

這將在dist/mylib.js中生成構(gòu)建文件

build.js

接下來(lái)，讓我們看看這些參數(shù)的實(shí)際含義。

baseUrl – 所有模塊查找的根路徑。

paths – 相對(duì)於baseUrl的模塊名稱的路徑映射。

在我們的示例中，“mylib”映射到“../main”，它相對(duì)於baseUrl，因此當(dāng)我們引用“mylib”時(shí)，它加載文件“../lib/../mylib/main .js”。請(qǐng)注意，我們附加了baseUrl，然後是paths設(shè)置，然後是模塊名稱，後跟.js後綴。您可以在其中指定模塊如何映射到文件，例如jquery和mylib。

include – 我們想要包含在優(yōu)化過程中的模塊。包含的模塊所需的依賴項(xiàng)會(huì)隱式包含。在我們的例子中，main模塊依賴於mylib和jquery，它們也將被包含在內(nèi)，因此無(wú)需顯式包含它。我們還包含稍後將提到的almond。

exclude – 我們想要從優(yōu)化過程中排除的模塊。在我們的例子中，我們排除了jquery。構(gòu)建庫(kù)的使用者將提供一個(gè)jQuery庫(kù)。稍後我們將看到這一點(diǎn)。

out – 優(yōu)化的輸出文件的名稱。

wrap – 將構(gòu)建包包裝在wrap指定的開始和結(jié)束文本中。優(yōu)化的輸出文件如下所示：wrap.start 包含的模塊 wrap.end。 wrap.start和wrap.end是其內(nèi)容包含在輸出中的文件名稱。

almond

構(gòu)建的庫(kù)不包含require.js文件，而是使用almond。 almond是一個(gè)小型AMD API實(shí)現(xiàn)，它將替換require.js。

包裝我們的庫(kù)

在r.js配置中，我們使用wrap.start和wrap.end文件包裝了我們的庫(kù)。我們還在庫(kù)中包含了almond，這些將使我們的庫(kù)獨(dú)立，因此它們可以通過瀏覽器全局變量使用，也可以通過requirejs作為AMD模塊使用。

文件：wrap.start

bower install requirejs --save

我們包含的模塊main、mylib和almond位於wrap.start和wrap.end的中間。

文件：wrap.end

define(['jquery'], function($) {
    // $現(xiàn)在是jquery。

    return 'mylib';
});

如果使用者使用AMD加載器，則構(gòu)建的文件將請(qǐng)求“jquery”作為AMD依賴項(xiàng)。如果使用者只使用瀏覽器全局變量，則庫(kù)將獲取$全局變量並將其用於jQuery依賴項(xiàng)。

使用RequireJS使用庫(kù)

我們的庫(kù)已經(jīng)完成了，現(xiàn)在讓我們通過構(gòu)建一個(gè)requirejs應(yīng)用程序來(lái)實(shí)際使用它。

文件：app.js

define(['jquery', 'mylib'], function($, mylib) {
    // $照常是jquery
    // mylib是字符串`mylib`，因?yàn)檫@是第一個(gè)模塊的返回值
    //

    return {
        version: '0.0.1, jQuery版本：' + $.fn.jquery,
        mylibString: mylib
    }
});

這裡沒有什麼特別的，它只是另一個(gè)引用jQuery和mylib的模塊。當(dāng)使用define定義模塊時(shí)，它不會(huì)立即執(zhí)行，也就是說，它的回調(diào)函數(shù)（在依賴項(xiàng)數(shù)組之後傳遞）不會(huì)立即執(zhí)行。這意味著我們的應(yīng)用程序不會(huì)僅僅通過定義此模塊而啟動(dòng)。現(xiàn)在讓我們看看如何配置RequireJS並實(shí)際執(zhí)行這個(gè)模塊，即我們的應(yīng)用程序。

為瀏覽器配置RequireJS

我們將在一個(gè)文件中配置RequireJS並執(zhí)行我們的app模塊。不過，也有不同的方法可以做到這一點(diǎn)。

文件：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: 配置傳統(tǒng)“瀏覽器全局”腳本的依賴項(xiàng)和導(dǎo)出，這些腳本不使用define()來(lái)聲明依賴項(xiàng)並設(shè)置模塊值。例如，Backbone不是AMD模塊，但它是一個(gè)瀏覽器全局變量，它將Backbone導(dǎo)出到我們已在exports中指定的全局命名空間。在我們的示例中，模塊還依賴於jQuery和Underscore，因此我們使用deps指定它。 deps數(shù)組中的腳本在加載Backbone之前加載，加載後，exports值將用作模塊值。

請(qǐng)注意，您也可以在此應(yīng)用程序項(xiàng)目中使用r.js，這將需要單獨(dú)的配置。但不要為此感到困惑。我不會(huì)詳細(xì)介紹如何操作，但這與我們對(duì)庫(kù)所做的類似。請(qǐng)參閱示例構(gòu)建配置以了解更多信息。

require與define

稍後我們將使用require加載模塊並立即執(zhí)行它。有時(shí)define和require可能會(huì)混淆使用哪個(gè)。 define定義一個(gè)模塊，但不執(zhí)行它，require定義一個(gè)模塊並執(zhí)行它——也就是說，它在執(zhí)行自身之前加載並執(zhí)行依賴模塊。通常，您將有一個(gè)require作為主入口模塊，它將依賴於通過define定義的其他模塊。

加載腳本

通常，您會(huì)在index.html中包含所有腳本文件?，F(xiàn)在我們使用RequireJS，我們只需要包含RequireJS並指定我們的data-main，它是我們應(yīng)用程序的入口點(diǎn)。設(shè)置配置選項(xiàng)或分離在index.html中使用的主模塊的方法有很多種。您可以在此處找到更多信息。

bower install requirejs --save

結(jié)論

在本文中，我們使用RequireJS構(gòu)建了一個(gè)庫(kù)和一個(gè)使用該庫(kù)的應(yīng)用程序。我們學(xué)習(xí)瞭如何配置r.js優(yōu)化器以及如何在瀏覽器中配置RequireJS。最後，我們學(xué)習(xí)瞭如何使用RequireJS定義和使用AMD模塊。這使我們的代碼結(jié)構(gòu)良好且組織有序。

在本教程的前半部分（配置優(yōu)化器），我使用了這個(gè)example-libglobal存儲(chǔ)庫(kù)，後半部分並不復(fù)雜，因此您現(xiàn)在應(yīng)該能夠自己動(dòng)手了。

官方RequireJS網(wǎng)站是最終文檔，但請(qǐng)務(wù)必查看github上的示例存儲(chǔ)庫(kù)以及該存儲(chǔ)庫(kù)中的示例項(xiàng)目，這些項(xiàng)目演示了RequireJS應(yīng)用程序的使用。

關(guān)於使用RequireJS構(gòu)建庫(kù)的常見問題解答（FAQ）

RequireJS在JavaScript開發(fā)中的主要目的是什麼？

RequireJS是一個(gè)JavaScript文件和模塊加載器。它針對(duì)瀏覽器使用進(jìn)行了優(yōu)化，但也可以在其他JavaScript環(huán)境中使用。 RequireJS的主要目的是鼓勵(lì)在JavaScript中使用模塊化編程。它幫助開發(fā)人員管理JavaScript文件之間的依賴關(guān)係並模塊化其代碼。這導(dǎo)致更好的代碼組織、可維護(hù)性和可重用性。它還可以提高代碼的速度和質(zhì)量。

RequireJS如何處理JavaScript文件依賴關(guān)係？

RequireJS使用異步模塊定義 (AMD) API 來(lái)處理 JavaScript 模塊。這些模塊可以異步加載，這意味著它們不會(huì)阻塞其他腳本在加載時(shí)運(yùn)行。當(dāng)您使用 RequireJS 定義模塊時(shí)，您會(huì)指定其依賴項(xiàng)。然後，RequireJS 會(huì)確保在模塊本身之前加載這些依賴項(xiàng)。

如何使用RequireJS定義模塊？

要在RequireJS中定義模塊，您可以使用define()函數(shù)。此函數(shù)接受兩個(gè)參數(shù)：一個(gè)依賴項(xiàng)數(shù)組和一個(gè)工廠函數(shù)。依賴項(xiàng)是模塊所依賴的文件的路徑。工廠函數(shù)是您編寫模塊代碼的地方。一旦所有依賴項(xiàng)都加載完畢，就會(huì)調(diào)用此函數(shù)。

如何在代碼中使用用RequireJS定義的模塊？

要使用用RequireJS定義的模塊，您可以使用require()函數(shù)。此函數(shù)接受兩個(gè)參數(shù)：一個(gè)依賴項(xiàng)數(shù)組和一個(gè)回調(diào)函數(shù)。依賴項(xiàng)是您要使用的模塊的路徑?；卣{(diào)函數(shù)是您使用模塊的地方。一旦所有模塊都加載完畢，就會(huì)調(diào)用此函數(shù)。

我可以將RequireJS與其他JavaScript庫(kù)（如jQuery）一起使用嗎？

是的，您可以將RequireJS與其他JavaScript庫(kù)（如jQuery）一起使用。 RequireJS有一個(gè)內(nèi)置功能，用於加載不使用define()來(lái)聲明依賴項(xiàng)並設(shè)置模塊值的傳統(tǒng)非模塊化腳本，稱為“shim”。使用shim，您可以為不使用define()來(lái)聲明依賴項(xiàng)和設(shè)置模塊值的腳本指定依賴項(xiàng)和導(dǎo)出。

如何使用RequireJS優(yōu)化我的代碼？

RequireJS帶有一個(gè)名為r.js的優(yōu)化工具。此工具將您的JavaScript文件及其依賴項(xiàng)組合併壓縮到單個(gè)文件中。這減少了HTTP請(qǐng)求的數(shù)量和文件的大小，這可以大大提高網(wǎng)頁(yè)的加載時(shí)間。

RequireJS中define()和require()的區(qū)別是什麼？

define()函數(shù)用於定義模塊，而require()函數(shù)用於加載模塊。這兩個(gè)函數(shù)都接受一個(gè)依賴項(xiàng)數(shù)組和一個(gè)函數(shù)作為參數(shù)。但是，傳遞給define()的函數(shù)用於創(chuàng)建模塊值，而傳遞給require()的函數(shù)用於在模塊加載後運(yùn)行代碼。

我可以在Node.js中使用RequireJS嗎？

是的，您可以在Node.js中使用RequireJS。但是，Node.js有自己的模塊系統(tǒng)，因此您可能不需要RequireJS。如果您想在瀏覽器和Node.js中都使用相同的代碼，或者如果您更喜歡AMD API，那麼RequireJS可能是一個(gè)不錯(cuò)的選擇。

如何處理RequireJS中的錯(cuò)誤？

RequireJS提供了一個(gè)onError回調(diào)來(lái)處理錯(cuò)誤。當(dāng)加載模塊時(shí)出現(xiàn)錯(cuò)誤時(shí)，會(huì)調(diào)用此回調(diào)。您可以使用此回調(diào)來(lái)記錄錯(cuò)誤或從中恢復(fù)。

我可以使用RequireJS加載CSS文件嗎？

是的，您可以使用require-css插件使用RequireJS加載CSS文件。此插件允許您加載和等待CSS文件，就像您使用JavaScript模塊一樣。

以上是用requirej構(gòu)建圖書館的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！