建立 NuGet 套件

已完成

當您封裝 Razor 類別庫時,會有 Blazor 專案可參考的二進位交付項目,而且其中的元件可用於這些專案。

在先前的單元中,您已使用強制回應元件建立 Razor 類別庫,以提供 Blazor 應用程式的強制回應對話方塊視窗。 若要共用該元件以在其他應用程式中使用,您需要封裝並將其置於存放庫或其他開發人員可取得該元件的資料夾中。

在此單元中,您將更新該專案並產生 NuGet 套件。 最後,您會將該 NuGet 套件部署到 Blazor 伺服器應用程式。

將套件屬性新增至 FirstClassLibrary

首先,使用屬性更新 FirstClassLibrary 專案,以允許將其封裝以供作為 NuGet 套件部署。

  1. 按兩下 Visual Studio 方案總管中的專案,或在 Visual Studio Code 中開啟 MyClassLibrary.csproj 檔案,以開啟 MyClassLibrary 專案的專案檔。

  2. 在檔案的頂端附近,具有 <PropertyGroup> 標籤的區段中,在結尾 </PropertyGroup> 標籤前面新增下列內容:

        <PackageId>My.FirstClassLibrary</PackageId>
        <Version>0.1.0</Version>
        <Authors>YOUR NAME</Authors>
        <Company>YOUR COMPANY NAME</Company>
        <Description>This is a Razor component library with a cool modal window component.</Description>
      </PropertyGroup>
    

    此程式碼會將 Razor 類別庫定義為具有 <PackageId> "My.FirstClassLibrary" 和 <Version> 0.1.0。 在這兩個欄位中輸入您自己的名稱和公司名稱。

封裝程式庫以供重複使用

接下來,您會在命令列執行 .NET 命令來封裝 Razor 類別庫,以便解決方案外部的其他應用程式參考它。

您可以在持續整合程序中執行這些相同的步驟來封裝程式庫,並將其部署至 NuGet.org、GitHub 存放庫或其他位置,以便組織共用。

在與 MyClassLibrary.csproj 檔案相同的資料夾中,執行下列命令:

dotnet pack

此命令會將名為 My.FirstClassLibrary.0.1.0.nupkg 的檔案寫入您的 bin/Debug 資料夾。

在 MyBlazorServer 應用程式中新增 NuGet 套件的參考

您已經在 MyBlazorServer 應用程式中參考 FirstClassLibrary 專案,因為它位於與 Web 應用程式相同的資料夾結構中。

現在,您將復原該專案參考,並將參考新增至您稍早建立的 NuGet 套件。

這些步驟「不是」一般設定。 如您在先前練習中所見,與想要參考專案的應用程式位於相同資料夾或解決方案中的程式庫專案可以直接參考專案。

  1. 在 Visual Studio 中按兩下 MyBlazorServer 專案名稱,或在 Visual Studio Code 中開啟 MyBlazorServer.csproj 檔案,藉此開啟該檔案。

  2. MyBlazorServer.csproj 檔案中,移除以下行:

    <ProjectReference Include="..\FirstClassLibrary\FirstClassLibrary.csproj" />

  3. 在與 MyBlazorServer.csproj 相同的資料夾中,執行下列命令:

    dotnet add package My.FirstClassLibrary -s ..\FirstClassLibrary\bin\Debug
    

    此命令會擷取您稍早建立的 NuGet 套件、在本機 NuGet 套件快取中安裝複本,然後在 MyBlazorServer.csproj 檔案中新增該套件的參考。

檢查您的工作

您的新套件是否已正確安裝? 您可啟動 FirstServer 應用程式,並在應用程式啟動時看到強制回應視窗嗎?

讓我們來看看:

  1. 在 Visual Studio 中選取 F5,或在 MyBlazorServer 資料夾中執行以下命令來啟動 MyBlazorServer 應用程式:

    dotnet run

  2. 在瀏覽器中,前往 MyBlazorServer 應用程式的首頁:https://localhost:5000

    [我的第一個強制回應對話方塊] 對話方塊是否顯示? 若已顯示,恭喜! 您已成功封裝並正確部署 FirstClassLibrary 專案。 現在,所有應用程式都可以藉由參考新建立的 NuGet 套件,使用您的強制回應視窗元件。