在 Azure DevOps Build Pipeline 中恢复 Libman JS 库

Question

I've set up a happy Azure DevOps build pipeline, which is triggered on a commit to a branch, then restores Nuget packages, builds my Mvc.Core web app and deploys it to an Azure App Service.

However the JS libraries referenced in LibMan are not restored and deployed to Azure. How do I get this to happen?

I've included the LibMan build package (which I read would carry out the task automatically ), but with no joy.

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

Do I really need to add a .net core custom command to the pipeline, to install the LibraryManager Cli tool , and then call it to restore the JS libraries ? It seems more complex than I'd expect, and I've not found any examples of anyone doing this online.

Is the other approach to include the JS libraries in source control? I did want to avoid this if possible, but if it is the standard approach, then I'm happy to do that I guess.

Any advice, or YAML examples of ways to achieve this in Azure DevOps would be very much appreciated.

Answer 1

The problem with restoring LibMan JS libraries in our case turned out to be a project file setting added by another developer months ago, when they were having problems with slow build times, as mentioned here .

 <PropertyGroup>
    <LibraryRestore>false</LibraryRestore>
  </PropertyGroup>

Once I found, and removed this setting, unsurprisingly the LibMan restore worked perfectly, and without a particularly slow build time either.

I guess the ideal situation would be not to attempt to do the LibMan restore on every build, but manually on developer machines, and then as a specific step in a DevOps build pipeline? But anyway, it's all working now.

Answer 2

Restore Libman JS Libraries in Azure DevOps Build Pipeline

You do not need to add a .net core custom command to the pipeline to restore the JS libraries.

I have created a sample to test LibMan build package, and it works fine on Azure devops.

To use the LibMan build package, first, you need set the correct the libman.json with JS Libraries in it in your project, like:

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


    }
  ]
}

That because LibMan package will restore the JS Libraries based on the libman.json . You will find following target in the microsoft.web.librarymanager.build.targets in the LibMan build package:

<Target Name="LibraryManagerRestore" Condition="'$(LibraryRestore)' != 'False'">

    <Microsoft.Web.LibraryManager.Build.RestoreTask
        FileName="libman.json"
        ProjectDirectory="$(MSBuildProjectDirectory)"
        ProviderAssemblies="$(LibraryProviderAssemblies)">

        <Output TaskParameter="FilesWritten" ItemName="_FilesWritten"/>
    </Microsoft.Web.LibraryManager.Build.RestoreTask>

    <ItemGroup>
        <FilesForPackagingFromProject  Include="%(_FilesWritten.Identity)">
            <DestinationRelativePath>%(_FilesWritten.Identity)</DestinationRelativePath>
        </FilesForPackagingFromProject>
    </ItemGroup>
</Target>

This .targets will only be parsed by MSBuild during building,

So , second, those JS Libraries will be restored when you build your project instead of restoring the packages.

As test, I remove the JS libraries from my repo:

Then after dotnet build completed, I could get the JS libraries in the folder wwwroot/lib/jquery :

If it still not resolve your issue, please make sure you can restore the JS Libraries when you build from Visual Studio without Azure Devops.

BTW, you can also use the task Libman (Preview) instead of MSBuild to restore packages defines in libman.json .

Hope this helps.