Skip to main content

Command Palette

Search for a command to run...

Microsoft Library Manager - ASP.NET Core 管理前端套件的新好工具

Updated
1 min read
Microsoft Library Manager - ASP.NET Core 管理前端套件的新好工具

Microsoft Library Manager - A new good tool to manage client-side library for ASP.NET Core

之前為了 Bower 半生不死寫了一篇替代文章:ASP.NET Core 將 NPM Package 檔案複製到 wwwroot/lib 底下,但是總決還是有點不方便,每透過 npm 安裝新的套件都還要手動改一下設定檔,要做兩次動作

後來發現了一個尚未正式釋出的新專案:Microsoft Library Manager,初步使用覺得還不錯,解決了大部分後端開發者需要管理前端套件的需求且也不會太複雜;而且前一篇文章竟然被認識的人發現,只好來補一下功課

首先,Microsoft Library Manager 因為尚未正式釋出,所以沒有內建在 Visual Studio 內,也沒有在 Visual Studio Marketplace 內;必須自己下載專案回來 Build 或是使用 CI 自動 Build 完的 Vsix,但是要注意,目前專案設定是針對 VS 15.8 Preview 做建置(15.8 以後應該就內建了),導致無法於 VS 15.7 上安裝,需要額外調整個設定,這邊請看下一篇文章:針對 Visual Studio 15.7 以下之版本建置 Microsoft Library Manager.vsix

備註:LibMan 不是用來取代 npm/yarn 的,我覺得主要是針對後端開發者只是需要用到些微管理前端相關 library,而非重度前端開發者

進入正題,安裝完 Microsoft Library Manager.vsix 後,於專案上點選右鍵即可看到 Manage Client-Side Libraries 選項,點選後即可看到於專案上會新增一檔案 libman.json,並已自動開啟

此檔案結構為 json,預設有三個屬性,以下說明一下

version (可選): String

用來指定 libman.json 之語法版本,目前只有 1.0 可用 (擷至 2018/08/15)

defaultProvider (可選): String

用來指定前端套件預設來源,雖然說是可以選,但是因為通常我們套件來源都是固定的,因此推薦一定要有,預設是從 cdnjs 讀取資料,還有 File System 可以用

libraries(必填): Object Array

前端套件列表,用來列出所有受管理的套件與其設定,物件內容詳細說明請參照下說

首先我們先來看一下範例 libman.json

其中可以看到多了 defaultDestination,這是套件預設安裝目錄,但是在現階段蠻雞肋的,他會將所有的套件檔案直接都放在此指定目錄裡,而不會分不同的套件名稱,所以暫時不太用裡他,取而代之目前會使用的是在每個套件描述裡指定目錄

libraries 底下的物件常用的屬性有三個:

library: String

代表cdnjs上套件之名稱與版本,使用 @分隔,套件名稱沒有 IntelliSense 支援,但是版本就有,輸入完套件名稱後打上 @ 就會出現版本的選單

files(選填): String Array

預設是不需要填此屬性,沒有此屬性時 LibMan 會自動下載所有相關資料夾結構與檔案,若是有指定只要某些檔案,可以在此新增,如:

"files": [ "jquery.min.js" ]

代表只需要取得 jquery.min.js 即可,結果如下

destination(必選填): string

這邊代表要將此套件檔案放在哪裡,若有設定 defaultDestination 就不用必填,但是反過來說,沒有 defaultDestination 就需要填寫此屬性,已現在來說我推薦都使用此屬性來管理套件的擺放位置

完成以上填寫並存檔後,LibMan 就會自動還原套件檔案,您也可以透過手動觸發或是清除受管理之套件資料夾

使用上述範例存檔後,從方案總管上來看會長成這樣

我個人認為這是一個對於後端開發者來說算是挺友善的前端套件管理套件,自從 Nuget 再也無法拿來管理前端套件後,尋尋覓覓應該到此就差不多終結了,希望他不要再死掉了

發完文後發現 LibMan 已正式內建於 VS 15.8 且 Release 了,可以去嘗試看看

參考

[aspnet/LibraryManager GitHub is where people build software. More than 28 million people use GitHub to discover, fork, and contribute to over…github.com](https://github.com/aspnet/LibraryManager "https://github.com/aspnet/LibraryManager")

More from this blog

Career-Ops 安裝與設定 — 用 AI 來幫你篩職缺、客製履歷

最近在看新的工作機會,光是瀏覽職缺、比對 JD、調整履歷就花了不少時間。 後來找到 Career-Ops 這個開源專案 作者 santifer 用這套系統篩了 740 多個職缺、產出 100 多份客製化履歷,最後拿到 Head of Applied AI 的 offer。 看起來蠻有意思的,所以我就在 Windows 上實際裝了一輪,這篇就來把整個安裝和設定的過程記錄下來。 我這邊搭配的 AI 後

Apr 12, 20265 min read
Career-Ops 安裝與設定 — 用 AI 來幫你篩職缺、客製履歷

讓 LLM 自動化你的 N8N 工作流程:n8n-mcp-server 安裝指南

前言 網路上一大堆都是在介紹如何在 N8N 裡面用 MCP 來呼叫其他工具,但是更多時候我希望 LLM 能直接幫我寫好或是修改 N8N 的工作流程 所以這篇就來介紹如何設定與使用 n8n-mcp-server 來讓 LLM 幫忙操控 N8N 在 GitHub 上有不少的 n8n-mcp-server,經過一下下的簡單搜索,我決定使用這個專案: n8n-mcp-server 原因在於說這個專案的實作提供了基本上所有需要編輯工作流程的功能,以下就來記錄安裝過程 MCP Server 設定 首先當然...

May 28, 20253 min read

[IT 鐵人賽] ASP.NET Core 與 Log 紀錄和追蹤的愛恨交織 - Day 05 - Elmah - 02

.NET Core Logging- Elmah 02 上一篇我們提到了基本的使用方式,接下來的這一篇我們就來講講要怎麼把 Log 放到不同的儲存體上,以及如何過濾 Log Log 儲存方式 我們先來看這些 Log 倒底存在哪裡,目前共有三種儲存方式,如下: MemoryErrorLog — store errors in memory 預設為使用此方式,簡單來說就是將錯誤 Log 都存在記憶體裡,所以只要應用程式一重新啟動,Log 就沒了;但是也是最方便的方式,只是要注意如果 Log 太...

Oct 20, 20182 min read
[IT 鐵人賽] ASP.NET Core 與 Log 紀錄和追蹤的愛恨交織 - Day 05 - Elmah - 02

[IT 鐵人賽] ASP.NET Core 與 Log 紀錄和追蹤的愛恨交織 - Day 04 - Elmah - 01

.NET Core Logging- Elmah 01 Elmah 是我最一開始使用的 Log 工具,基本上它的功能就是將應用程式所有發生的錯誤記錄下來,不需要改變程式架構,而且又有介面可以觀看,十分的方便;它從 WebForm 時代就有了,到了 MVC 也是運作的很好,那這邊就來介紹一下 Elmah 要如何在 ASP.NET Core 中使用 (.NET Core 也可使用)。 不過很可惜的,目前並沒有釋出官方的 Elmah for .NET Core,不過有一個新專案: ElmahCore...

Oct 19, 20181 min read
[IT 鐵人賽] ASP.NET Core 與 Log 紀錄和追蹤的愛恨交織 - Day 04 - Elmah - 01

[IT 鐵人賽] Azure Data Service - Day 04 - Cognitive Service - 辨識 - Video Indexer

Azure Data Service - Day 04 - Cognitive Service - Vision - Video Indexer 前面幾篇都是介紹靜態影像的辨識與分析,那這篇就來到針對影片來做處理。 Cognitive Service 針對影片辨識的部分提供了:Video Indexer 它整合了許多功能,在這邊列出一些比較重要的功能: 語系偵測 可以自動偵測出這個影片是屬於哪個語系,目前支援: English, Spanish, French, German, Italia...

Oct 19, 20181 min read
[IT 鐵人賽] Azure Data Service - Day 04 - Cognitive Service - 辨識 - Video Indexer

BrainBurst, HeadFirst

45 posts

學習學到老,撞牆撞到腦. A lifelong quest—with forehead dents.