Why use it?
Why NOT to use it?
Although the github repo states only a couple of reasons not to use it, one is if you are packaging using WebPack. Not too sure about this as I have used both LibMan and WebPack together and am more than happy with my workflow.
How to use it
Right click the project
Select Add --> Client Side Libraries
There are 3 options for providers:-
The default is cdnjs which you can see when a libman.json file is produced:-
In this example I have jQuery and jQueryUI libraries installed, however I am a bit picky with jQuery and only want the minified file so within the files array, I specify just that.
If you right click on the libman.json file in Solution Explorer, you get the options to Clean and Restore the libraries and also to Enable Restore Client Libraries on Build. This last option adds a new nuget package to your project which will do just that.
LibMan also has a simple CLI that can be used instead of the UI and also in a CI/CD environment (although there is no documentation on the latter https://github.com/aspnet/librarymanager/wiki/Using-LibMan-in-a-CI-Build).
As it comes with Visual Studio, the CLI is already installed. Using libman --version gives you the version, I get 2.0.76+gb7a1f9d9b0
The three main commands are:-
- libman -install
- libman -clean
- libman -restore
All the command parameters can be found at https://docs.microsoft.com/en-us/aspnet/core/client-side/libman/libman-cli?view=aspnetcore-2.2
cdnjs - The default Content Delivery Network
Use it with ASP.Net
Within the _Layout.cshtml file in your project are the environment tag helpers that help seperate out development code and non development code. Simply make sure you have and include=”Development” and exclude=”development” helpers like this:-
You can copy the source address from the cdnjs page for jQuery and get the sha256 key by copying the SRI like this:-
So what is 'asp-fallback-test' all about?
The asp-fallback-test tag helper injects a script tag into the page, in jQuery's case it is like this:-
<script>(window.jQuery||document.write("\u003Cscript src=\u0022\/lib\/jquery\/jquery.min.js\u0022 crossorigin=\u0022anonymous\u0022 integrity=\u0022sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=\u0022\u003E\u003C\/script\u003E"));</script>
You can easily test this by moving the above mark-up into the <environment include="Development"> tags, then look at the development tools in your browser. Firefox shows this:-
Which you can see it is fresh as the size is 30.10kB and the response is a 200.
And when refreshing, shows this:-
The response size is now showing as cached and the response code is 304 for ‘Not Modified’
You can test the fall-back by changing the src to something that would NOT be found and refreshing the page while holding down the CTRL key to force a full refresh. The dev tools show that the script is coming from a local source and not the CDN like this:-
I have only used LibMan on a handful of projects and I am already finding it a simple and useful tool.