The first package management system I learned to use was Bower. It was great for the short love affair we had together, but it stopped being supported and I was weary of learning to use one of its replacements. Fortunately, I haven’t had to with Libman. Libman’s (Library Manager) simple JSON approach to bringing front end dependencies has been the easiest for me quickly implement and it has been a great addition to Visual Studio. I implemented it possibly too quickly, however, and overlooked one powerful configuration setting: provider.
Library Not On Libman!
That was my first sign of trouble, but what actually happened: I didn’t specify the right provider.
The defaultProvider I specified was cdnjs, like the many examples out there, and though it has a lot of front end libraries, cdnjs, of course, doesn’t have all libraries.
Here’s a simple example of how Libman successfully does use cdnjs to bring in jQuery:
{ "version": "1.0", "defaultProvider": "cdnjs", "libraries": [ { "library": "jquery@3.3.1", "destination": "wwwroot/lib/jquery", "files": [ "jquery.min.js" ] } ] }
Libman Provider Options
In addition to CDNJS, Libman supports two other providers. Here is the complete list:
- cdnjs (default provider)
- filesystem (local files)
- unpkg (a CDN for everything on NPM)
This works great and if a dependency didn’t resolve, I added a provider line, changing it’s provider:
{ "provider": "unpkg", "library": "bulma-checkradio", "destination": "wwwroot/lib/bulma", "files": [] }
UNPKG Library Could Not Be Resolved
When using unpkg as a provider, though, I couldn’t get any files to list in Intellisense. I simply got no results. I also got no versions on the library.
So, I did a bit of a hack and used the 3rd option for provider: filesystem.
Using Local Files
I had 2 particular packages that would show on unpkg, but return the following errors:
The “bulma-checkradio” library could not be resolved by the “unpkg” provider
The “datatables-bulma” library could not be resolved by the “unpkg” provider
Restore operation completed with errors
So, I imported them via NPM:
{ "name": "myproject", "version": "1.0.0", "devDependencies": { "bulma-checkradio": "2.1.0", "datatables-bulma": "^1.0.1" }, "-vs-binding": { "BeforeBuild": [ "update" ] } }
But I didn’t want to add my _node_modules folder to the project, making NPM packages unable to be brought into Views. So, I used Libman to copy the files from the _node_modules folder into my wwwroot/lib folder:
{ "provider": "filesystem", "library": "node_modules/bulma-checkradio/dist/css/", "destination": "wwwroot/lib/bulma/bulma-checkradio/css", "files": [ "bulma-checkradio.min.css" ] },
It works, just wishing this was a bit smoother.