Använda LibMan med ASP.NET Core i Visual Studio

Av Scott Addie

Visual Studio har inbyggt stöd för LibMan i ASP.NET Core-projekt, inklusive:

• Stöd för att konfigurera och köra Återställningsåtgärder för LibMan i bygget.
• Menyalternativ för att utföra LibMan-återställning och rensningsåtgärder.
• Sökdialogruta för att hitta bibliotek och lägga till filerna i ett projekt.
• Redigeringsstöd för libman.json– LibMan-manifestfilen.

Visa eller ladda ned exempelkod(ladda ned)

Prerequisites

• Visual Studio 2019 med ASP.NET och webbutvecklingsarbetsbelastning

Lägga till biblioteksfiler

Biblioteksfiler kan läggas till i ett ASP.NET Core-projekt på två olika sätt:

1. Använd dialogrutan Lägg till Client-Side-bibliotek
2. Konfigurera LibMan-manifestfilposter manuellt

Använd dialogrutan Lägg till Client-Side-bibliotek

Följ dessa steg för att installera ett bibliotek på klientsidan:

• Högerklicka på projektmappen där filerna ska läggas till i Solution Explorer. Välj Lägg till>Client-Side-bibliotek. Dialogrutan Lägg till Client-Side bibliotek visas:

  

• Välj biblioteksprovidern i listrutan Provider . CDNJS är standardprovidern.

• Skriv det biblioteksnamn som ska hämtas i textrutan Bibliotek . IntelliSense innehåller en lista över bibliotek som börjar med den angivna texten.

• Välj biblioteket i IntelliSense-listan. Observera att biblioteksnamnet är suffixet med symbolen @ och den senaste stabila versionen som den valda providern känner till.

• Bestäm vilka filer som ska inkluderas:

  • Välj alternativknappen Inkludera alla biblioteksfiler för att inkludera alla bibliotekets filer.
  • Välj alternativknappen Välj specifika filer för att inkludera en delmängd av bibliotekets filer. När alternativknappen har valts aktiveras filväljarens träd. Markera rutorna till vänster om filnamnen som ska laddas ned.

• Ange projektmappen för lagring av filerna i textrutan Målplats . Som rekommendation lagrar du varje bibliotek i en separat mapp.

  Den föreslagna mappen Målplats baseras på platsen som dialogrutan startades från:

  • Om det startas från projektroten:
    • wwwroot/lib används om wwwroot finns.
    • lib används om wwwroot inte finns.
  • Om det startas från en projektmapp används motsvarande mappnamn.

  Mappförslaget har suffixet med biblioteksnamnet. I följande tabell visas mappförslag när du installerar jQuery i ett Razor Pages-projekt.

  Startplats	Föreslagen mapp
  projektrot (om wwwroot finns)	wwwroot/lib/jquery/
  projektrot (om wwwroot inte finns)	lib/jquery/
  Sidmapp i projekt	Pages/jquery/

• Klicka på knappen Installera för att ladda ned filerna enligt konfigurationen i libman.json.

• Läs bibliotekshanterarens feed i utdatafönstret för att få information om installationen. Till exempel:

  Restore operation started...
  Restoring libraries for project LibManSample
  Restoring library jquery@3.3.1... (LibManSample)
  wwwroot/lib/jquery/jquery.min.js written to destination (LibManSample)
  wwwroot/lib/jquery/jquery.js written to destination (LibManSample)
  wwwroot/lib/jquery/jquery.min.map written to destination (LibManSample)
  Restore operation completed
  1 libraries restored in 2.32 seconds
  

Konfigurera LibMan-manifestfilposter manuellt

Alla LibMan-åtgärder i Visual Studio baseras på innehållet i projektrotens LibMan-manifest (libman.json). Du kan redigera libman.json manuellt för att konfigurera biblioteksfiler för projektet. Visual Studio återställer alla biblioteksfiler en gång libman.json sparas.

Följande alternativ finns för att öppna libman.json för redigering:

• Dubbelklicka på libman.json filen i Solution Explorer.
• Högerklicka på projektet i Solution Explorer och välj Hantera Client-Side bibliotek. †
• Välj Hantera Client-Side bibliotek på Visual Studio Project-menyn . †

†libman.json Om filen inte redan finns i projektroten skapas den med standardinnehållet för objektmallen.

Visual Studio erbjuder omfattande JSON-redigeringsstöd, till exempel färgläggning, formatering, IntelliSense och schemavalidering. JSON-schemat för LibMan-manifestet finns på https://json.schemastore.org/libman.

Med följande manifestfil hämtar LibMan filer enligt den konfiguration som definierats i libraries egenskapen. En förklaring av objektliteralerna som definierats inom libraries följer:

• En delmängd av jQuery version 3.3.1 hämtas från CDNJS-providern. Delmängden files definieras i egenskapen ,jquery.min.js , jquery.jsoch jquery.min.map. Filerna placeras i projektets wwwroot/lib/jquery-mapp .
• Hela Bootstrap version 4.1.3 hämtas och placeras i en wwwroot/lib/bootstrap-mapp . Egenskapen för objektliteralen provider åsidosätter egenskapsvärdetdefaultProvider. LibMan hämtar Bootstrap-filerna från unpkg-providern.
• En delmängd av Lodash godkändes av ett styrande organ inom organisationen. Filerna lodash.js och lodash.min.js hämtas från det lokala filsystemet på C:\temp\lodash\. Filerna kopieras till projektets wwwroot/lib/lodash-mapp .

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jquery@3.7.1",
      "files": [
        "jquery.min.js",
        "jquery.js",
        "jquery.min.map"
      ],
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "provider": "unpkg",
      "library": "bootstrap@5.3.6",
      "destination": "wwwroot/lib/bootstrap/"
    }
  ]
}

Återställa biblioteksfiler

Om du vill återställa biblioteksfiler från Visual Studio måste det finnas en giltig libman.json fil i projektroten. Återställde filer placeras i projektet på den plats som anges för varje bibliotek.

Biblioteksfiler kan återställas i ett ASP.NET Core-projekt på två sätt:

1. Återställa filer under kompilering
2. Återställa filer manuellt

Återställa filer under kompilering

LibMan kan återställa de definierade biblioteksfilerna som en del av byggprocessen. Som standard är beteendet restore-on-build inaktiverat.

Så här aktiverar och testar du återställningsbeteendet vid kompilering:

• Högerklicka libman.json i Solution Explorer och välj Aktivera återställ Client-Side bibliotek vid kompilering på snabbmenyn.

• Klicka på knappen Ja när du uppmanas att installera ett NuGet-paket. NuGet-paketet Microsoft.Web.LibraryManager.Build läggs till i projektet:

  <PackageReference Include="Microsoft.Web.LibraryManager.Build" Version="3.0.71" />
  

• Skapa projektet för att bekräfta att Återställning av LibMan-filer sker. Paketet Microsoft.Web.LibraryManager.Build matar in ett MSBuild-mål som kör LibMan under projektets byggåtgärd.

• Granska build-flödet i utdatafönstret för en LibMan-aktivitetslogg:

  1>------ Build started: Project: LibManSample, Configuration: Debug Any CPU ------
  1>
  1>Restore operation started...
  1>Restoring library jquery@3.3.1...
  1>Restoring library bootstrap@4.1.3...
  1>
  1>2 libraries restored in 10.66 seconds
  1>LibManSample -> C:\LibManSample\bin\Debug\netcoreapp2.1\LibManSample.dll
  ========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
  

När funktionen för återställning vid sammanställning är aktiverad, visar snabbmenyn alternativet libman.json. Om du väljer det här alternativet tar du bort paketreferensen Microsoft.Web.LibraryManager.Build från projektfilen. Därför återställs inte längre biblioteken på klientsidan i varje version.

Oavsett inställningen restore-on-build kan du när som helst återställa manuellt från libman.json snabbmenyn. Mer information finns i Återställa filer manuellt.

Återställa filer manuellt

Så här återställer du biblioteksfilerna manuellt:

• För alla projekt i lösningen:
  • Högerklicka på lösningsnamnet i Solution Explorer.
  • Välj alternativet Återställ Client-Side bibliotek .
• För ett specifikt projekt:
  • Högerklicka på libman.json filen i Solution Explorer.
  • Välj alternativet Återställ Client-Side bibliotek .

Medan återställningsåtgärden körs:

• Ikonen för Aktivitetsstatuscenter (TSC) i statusfältet i Visual Studio kommer att animeras och visa Återställningsåtgärden startad. När du klickar på ikonen öppnas en knappbeskrivning som visar kända bakgrundsaktiviteter.

• Meddelanden skickas till statusfältet och Bibliotekshanterarens flöde i utdatafönstret . Till exempel:

  Restore operation started...
  Restoring libraries for project LibManSample
  Restoring library jquery@3.3.1... (LibManSample)
  wwwroot/lib/jquery/jquery.min.js written to destination (LibManSample)
  wwwroot/lib/jquery/jquery.js written to destination (LibManSample)
  wwwroot/lib/jquery/jquery.min.map written to destination (LibManSample)
  Restore operation completed
  1 libraries restored in 2.32 seconds
  

Ta bort biblioteksfiler

För att utföra den rena åtgärden, som tar bort biblioteksfiler som tidigare återställts i Visual Studio:

• Högerklicka på libman.json filen i Solution Explorer.
• Välj alternativet Rensa Client-Side bibliotek .

För att förhindra oavsiktlig borttagning av icke-biblioteksfiler tar den rena åtgärden inte bort hela kataloger. Den tar bara bort filer som ingick i den tidigare återställningen.

När den rena operationen körs:

• TSC-ikonen i statusfältet i Visual Studio kommer att vara animerad och kommer att visa åtgärden för klientbibliotek har startat. När du klickar på ikonen öppnas en knappbeskrivning som visar kända bakgrundsaktiviteter.
• Meddelanden skickas till statusfältet och Bibliotekshanterarens flöde i utdatafönstret . Till exempel:

Clean libraries operation started...
Clean libraries operation completed
2 libraries were successfully deleted in 1.91 secs

Den rena åtgärden tar bara bort filer från projektet. Biblioteksfilerna finns kvar i cacheminnet för snabbare hämtning vid framtida återställningsåtgärder. Om du vill hantera biblioteksfiler som lagras i den lokala datorns cacheminne använder du LibMan CLI.

Avinstallera biblioteksfiler

Så här avinstallerar du biblioteksfiler:

• Öppna libman.json.

• Placera caret inuti motsvarande libraries objektliteral.

• Klicka på glödlampaikonen som visas i vänstermarginalen och välj Avinstallera <library_name>@<library_version>:

  

Du kan också redigera och spara LibMan-manifestet manuellt (libman.json). Återställningsåtgärden körs när filen sparas. Biblioteksfiler som inte längre definieras i libman.json tas bort från projektet.

Uppdatera biblioteksversion

Så här söker du efter en uppdaterad biblioteksversion:

• Öppna libman.json.
• Placera caret inuti motsvarande libraries objektliteral.
• Klicka på den glödlampa som visas i vänstermarginalen. Hovra över Sök efter uppdateringar.

LibMan söker efter en biblioteksversion som är nyare än den installerade versionen. Följande resultat kan inträffa:

• Meddelandet Inga uppdateringar hittades visas om den senaste versionen redan är installerad.

• Den senaste stabila versionen visas om den inte redan är installerad.

  

• Om en förhandsversion som är nyare än den installerade versionen är tillgänglig visas förhandsversionen.

Om du vill nedgradera till en äldre biblioteksversion redigerar du libman.json filen manuellt. När filen sparas utförs LibMan-återställningsoperationen:

• Tar bort redundanta filer från den tidigare versionen.
• Lägger till nya och uppdaterade filer från den nya versionen.

Ytterligare resurser

• Använd LibMan CLI med ASP.NET Core
• GitHub-lagringsplats för LibMan