Visual Studio 2017中使用Libman管理客戶端庫

什么是Libman

微軟在Visual Studio 2017 15.8版本中內嵌了一個新的工具Library Manager。

Library Manager(簡稱Libman)是一個客戶端庫管理工具， 使用它可以很容易的管理項目中使用的客戶端js庫, css庫等，Libman相當於一個針對客戶端庫的Nuget，而且Libman並不是指針對.NET項目的，非.NET項目也可以使用。

注意： 這個工具暫時只是一個實驗階段的工具。

如何使用Libman

下面我們來通過一個小例子演示一下如何使用Libman

添加項目

為了體現Libman並不只針對.NET項目，我們創建一個空文件夾Code, 並在其中創建一個名為libs的子目錄, 並使用Visual Studio 2017以Website的方式打開它

然后我們可以右鍵點擊code站點, 選擇Manage Client-Side Library

點擊之后，code目錄中就會生成一個libman.json文件, libman.json是Libman的配置文件，其默認內容如下

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": []
}

libman.json中的配置項

• defaultProvider

  這個參數指定了默認使用客戶端庫的來源, Libman提供了3種可選的來源。

  • cdnjs - 默認來源
  • filesystem - 來自本地文件
  • unpkg - 一個全球cdn

• defaultDestination

  客戶端庫的默認存儲位置

• libraries

  客戶端庫列表

添加jQuery 3.3.1

下面我們修改libraries節點中，添加對jquery 3.3.1的引用

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jquery@3.3.1",
      "destination": "libs/jQuery_3.3.1",
      "provider": "cdnjs"
    }
  ]
}

• library - 客戶端庫的名稱, 格式是“包名@版本號”
• destination - 客戶端庫在當前項目中的存儲位置
• provider - 客戶端庫的來源

這里如果你不是粘貼代碼話，手動輸入會出現代碼提示，Visual Studio會根據你的輸入匹配最接近的包名並列出所有可用的版本。

手動恢復客戶端庫

修改完成后，我們右鍵點擊libman.json， 選擇Restore Client-Side Libraries

我們所需的客戶端庫就自動下載並導入到項目指定目錄中了。

Build時自動恢復客戶端庫

除了手動恢復客戶端庫，Visual Studio還提供了一個Enable Restore Client-Side Libraries on Build的選項，即項目Build時自動恢復所需的客戶端庫。

選擇該項之后，Visual Studio會彈出一下提示

點擊確認之后，項目中會出現一個package.json, 里面添加了對Microsoft.Web.LibraryManager.Build庫的引用

<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="Microsoft.Web.LibraryManager.Build" version="1.0.163" targetFramework="net40" />
</packages>

如果當前是一個.NET項目，這個引用會出現在csproj文件中

<Project Sdk="Microsoft.NET.Sdk.Web">  
  
<PropertyGroup>  
   <TargetFramework>netcoreapp2.1</TargetFramework>  
</PropertyGroup>  
  
<ItemGroup>  
   <PackageReference Include="Microsoft.AspNetCore.App" />  
   <PackageReference Include="Microsoft.Web.LibraryManager.Build" Version="1.0.163" />  
</ItemGroup>  
  
</Project>  

總結

Libman是對Visual Studio很好的補充(之前大部分都是使用bower等類似組件來管理), 它可以幫助開發人員管理客戶端庫，避免了開發人員手動下載並引入客戶端庫造成混亂，有興趣的同學可以嘗試一下。