Microsoft released Library Manager a few weeks ago. Library Manager is a Visual Studio's new client-side static content management system. Designed as a replacement for Bower and npm, Library Manager helps users find and fetch library files from an external source (like CDNJS) or any file system library catalog.
Library Manager is open-source. You can find the source of the project on GitHub: https://github.com/aspnet/LibraryManager.
#How does it work?
In Visual Studio, you have a new contextual menu item "Manage Client-Side Libraries…":
It creates a new file named libman.json. This file contains the list of libraries to download. Each library has a name, a version, a list of files to download, and the location where the file will be copied. Of course, there is an autocompletion for the name, the version, and files!
JSON
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "systemjs@0.21.2",
"destination": "wwwroot/lib/systemjs",
"files": [
"system.js",
"system.js.map"
]
},
{
"library": "font-awesome@4.7.0",
"destination": "wwwroot/lib/font-awesome",
"files": [
"css/font-awesome.min.css",
"fonts/fontawesome-webfont.eot",
"fonts/fontawesome-webfont.svg",
"fonts/fontawesome-webfont.ttf",
"fonts/fontawesome-webfont.woff",
"fonts/fontawesome-webfont.woff2",
"fonts/FontAwesome.otf"
]
}
]
}
The file is easy to read and write (and even more with the auto-completion). library is composed of the name and the version of the library. destination is the path where the file will be downloaded. files is the list of files of the library to download.
Every time the file is saved, Visual Studio will install/restore the packages. You can also restore them manually using the context menu:
If you want to restore the package at build time, you can use an MS Build task. This may be useful for building on a build server (CI), or when working outside of Visual Studio. You can add the MS Task automatically by clicking on "Enable Restore on Build":
This will add the package Microsoft.Web.LibraryManager.Build to your project. Then, when you build the project, the files will be downloaded and copied to the specified destination:
Tips: You can quickly update or uninstall a library using the light bulb. This will helps you to keep up to date easily:
#Why do we need this tool?
A few years ago, you would add a library such as bootstrap using a NuGet package. While NuGet is very good for managing DLL dependencies, it doesn't feet well with client-side dependencies. Indeed, you cannot choose where the files are copied, nor which files you want. This decision is made by the owner of the package, so you can have multiple locations and hierarchy. This wasn't a good idea, so people moved to Bower. Bower was great, but on the Bower's website they recommend to migrate to yarn and webpack.
If you are doing a Single Page Application or a complex front-end application using tools like npm/yarn and webpack, you may already have everything you need to manage your dependencies. So, you don't need a new tool like LibMan.
If you are doing a basic website, and you want to add libraries such as Bootstrap or FontAwesome, you may not want to bother with NodeJS and npm. Indeed, npm has some drawbacks:
- npm downloads everything in
node_modules, so you need to copy the files you want to wwwroot. You may use an MSBuild task or another toolchain maybe based on nodejs. - npm downloads the whole repository even if you need one file, so the first time it can take lots of times
- npm requires NodeJS. While npm is installed with Visual Studio, it may not be the case on a build server
Library Manager tries to address these issues:
- LibMan is well integrated in the .NET ecosystem (NuGet package, Visual Studio extension). You don't need to do
npm install before building the .NET project. Instead, building the project will restore the NuGet packages and then restore the files. - LibMan is faster because it only downloads the necessary files
- LibMan can download the files directly in wwwroot or wherever you want, so you don't need to add a post restore step to copy them.
To conclude, if you are building a basic website and you need to add a few libs, Library Manager is a good option. For something more complex such as a SPA, you may go with npm and webpack.
Do you have a question or a suggestion about this post? Contact me!
