建立 NuGet 套件

已完成

當您封裝 Razor 類別庫時,您將擁有一個二進位可交付項目,其他 Blazor 專案可以從中引用,且其中元件可用於這些專案。

在先前的單元中,您已建立 Razor 類別庫,其中包含提供 Blazor 應用程式的模態對話框窗口的模態元件。 若要共用該元件以供其他應用程式使用,您必須封裝並放置於存放庫或其他開發人員可以取得它的資料夾。

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

將套件屬性新增至 FirstClassLibrary

首先,更新 FirstClassLibrary 專案的屬性,以便能將其打包成 NuGet 套件並進行部署。

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

  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 存放庫,或組織共用的另一個位置。

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

dotnet pack

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

在 MyBlazorApp 應用程式中新增 NuGet 套件的引用

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

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

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

  1. 按兩下Visual Studio中的 MyBlazorApp 專案名稱,或在Visual Studio Code 中開啟檔案,以開啟 MyBlazorApp.csproj 檔案。

  2. MyBlazorApp.csproj 檔案中,移除下列這一行:

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

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

    dotnet add package My.FirstClassLibrary -s ../FirstClassLibrary/bin/Release
    

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

檢查您的工作

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

讓我們來看看:

  1. 藉由選取 F5 或在 MyBlazorApp 資料夾中,執行下列命令,在 Visual Studio 中啟動 MyBlazorApp 應用程式:

    dotnet run

  2. 在您的瀏覽器中,移至 MyBlazorApp 應用程式的首頁: https://localhost:5000

    [我的第一個強制回應對話方塊] 對話方塊是否顯示? 如果是這樣,恭喜! 您已成功封裝並部署 FirstClassLibrary 專案。 現在,任何地方的應用都可以參考您新建立的 NuGet 套件,來使用您的模態視窗元件。