Day02 - 安裝 Packages 和 Libraries


前言

這邊將介紹幾個常見的 packages 安裝工具,以下是本篇的大鋼。

  • Packages 安裝工具
    • NuGet
    • Node Package Manager (NPM)
    • LibMan

Packages 安裝工具

NuGet

Server-side (.NET) Libraries 的安裝工具

Node Package Manager (NPM)

Client-side libraries 的安裝工具,例如 JavaScrip 和 CSS 等 libraries。NPM是目前很常見的套件安裝工具,可以將 libraries 下載到本地端。若你不想要把整個 package 載到你本地端,你可以使用 Central location for static files (CDN) 的方式來嵌入套件。CDN 是已經將 packages 放到雲端了,不用直接把整個 package 載到你本地。例如,如果你要用Bootstrap,你只要 link https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css 這個網址到你 CSS 檔案裏面就可以了。使用 CDN 的好處是,瀏覽器有可能會已經有這個檔案的暫存了(cached) ,因為別的網站也有可能會用 CDN。

範例 - 使用 NPM 安裝 Bootstrap libraries

  • 步驟一: 對專案按右鍵 > 加入 > 新增項目
  • 步驟二: 右上角輸入 npm > 找到 npm configure file > 建立
  • 步驟三: 加入 Dependency : 在devDependencies輸入"bootstrap": "4.4.1"
    {
    "version": "1.0.0",
    "name": "asp.net",
    "private": true,
    "devDependencies": {
      "bootstrap": "4.4.1"
    }
    }
    
  • 步驟四: Ctrl + s 存檔
  • 存檔後會看到專案底下的相依性多了npm的資料夾,裡面有剛剛安裝的bootstrap 4.4.1 。這樣就完成囉!

範例 - 解除 NPM 安裝的 Bootstrap libraries

只需要把剛剛新增的"bootstrap": "4.4.1"這行拿掉,然後存檔。就成功解安裝Bootstrap囉!是不是很簡單!

LibMan

LibMan 是 Visaul Studio 內建用來安裝 Client-side libraries 的簡易小工具。剛剛上面示範了使用 npm 安裝 bootstrap ,可是有個問題是,大多時候我們並不需要整個 package,而是只需要其中幾個檔案而已,這時候就可以使用 LibMan。

範例 - 使用 LibMan 安裝 Bootstrap libraries

  • 步驟一: 對專案按右鍵 > 加入 > 用戶端程式庫。
  • 步驟二: 這邊可以看到提供者(Provider)有四個選項可以選,cdnjsjsdelivr都是可以使用CDN的;filesystem則是可以直接從你本地端匯入;unpkg則是使用npm的方式來安裝 libraries。這邊我們選擇 unpkg。
  • 步驟三: 輸入bootstrap@4.4.1。在輸入的同時,你可以發現這邊有 intellisense,可以直接選擇你想安裝的版本。
  • 步驟四: 選擇「選擇特地檔案」,這時候就可以只選擇我們需要的 bootstrap.css 檔案了。
  • 步驟五: 選擇存放的目標位置,並按下「安裝」
  • 這時候可以看到有兩件事發生了。第一件事是在 wwwroot目錄底下有了 bootstrap.css 的檔案,而第二件事是這時多了一個 libman.json 檔案。
    // libman.json
    {
    "version": "1.0",
    "defaultProvider": "unpkg", // 我們剛剛選的 unpkg Provider
    "libraries": [
      {
        "library": "bootstrap@4.4.1", // 我們剛剛選的安裝的 library
        "destination": "wwwroot/lib/bootstrap/", // 我們剛剛選的安裝路徑
        "files": [ // 我們剛剛選的要安裝的檔案
          "dist/css/bootstrap.css" 
        ]
      }
    ]
    }
    
    ### 範例 - 解除 LibMan 安裝的 Bootstrap libraries
  • 在 libman.json 的檔案裏面,滑鼠移到行號右邊,可以看到小燈泡,點開小燈炮裡面就有「解除安裝 bootstrap 4.4.1」啦!是不是很方便!甚至還有檢查有沒有需要更新的版本呢!

結語

今天介紹了如何使用 三個內建的 Visual Studio 內建的小工具來安裝 packages💖

#libman #npm #nuget






Related Posts

我很菜,所以只會用原生 JS 跟 CSS 寫「口罩地圖 」Ep.01

我很菜,所以只會用原生 JS 跟 CSS 寫「口罩地圖 」Ep.01

MTR04_0923

MTR04_0923

Day00 : 七天重新認識Python

Day00 : 七天重新認識Python



Comments











Sponsored