用requirej構建圖書館

關鍵要點

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

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中文網其他相關文章！