catrina
Posted on October 17, 2018
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.
Posted on October 17, 2018
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.