昨天我們透過 npm init 對專案進行了初始化的設定，讓我們可以在這個專案中開始使用 npm，也產生了 package.json 這個檔案來記錄我們專案中關於 npm 的各種資訊。

npm install

我們要用 npm 來建立 sass 的開發環境，Sass 是一個 CSS 的預處理器，他可以簡化許多撰寫 CSS 時需要的作業程序。

npm install [package-name] 是從哪裡下載東西的？

就是昨天提到的 npm 所提供的 registry 中，將想要的 pcakage 下載回專案中。

我們可以在 npm 官網上方的搜尋欄 輸入 sass 去尋找我們今天要安裝的主角。

進入 sass 的頁面後，在右側的欄位中可以得知安裝所需的 cli 指令、此 pcakage 的相關網頁，下載趨勢、版本、大小...等等。

目前我們需要的是最上面 install 的指令：

npm i sass

我們在終端機中輸入這個指令去下載 sass：

從訊息中可以得知：

• npm 建立了一個 lockfile - package-lock.json，而你應該將這個檔案 commit 進 git 的紀錄中
• +sass@1.54.9，在 1.04 秒中，從 60 個貢獻者之中新增了 18 個 packages 並審核完成
• 這之中有兩個 package 在尋找贊助，可以輸入 npm fund 來檢視詳細的資訊
  
• 發現 0 個漏洞

package.json

現在我們再回去看 package.json 變了哪些地方

{
  "name": "npm-initial-repository",
  "version": "1.0.0",
  "description": "this repository is use on ithome2022 article, try to make an example for npm init",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "ithome2022",
    "npm",
    "init"
  ],
  "author": "Rocket Pencil",
  "license": "MIT",
  "dependencies": {
    "sass": "^1.54.9"
  }
}

可以看到下方多了一個：

"dependencies": {
    "sass": "^1.54.9"
}

denpendencies 列出了所安裝的 package 與該 package 的版號。

在這邊的符號分別表示了在輸入 npm install 時，該 package 所能安裝的版號範圍。

^1.54.9 表示第一碼是鎖住的，當這份 package 有更新的時候，你可以安裝的版號範圍是：>=1.54.9 與 <2.0.0，也就是 1.*.*

~1.54.9 表示第二碼是鎖住的，你可以安裝的版號範圍是：>=1.54.9 與 <1.55.0

其他符號有 >, <, <=, >= 等

參考

• 版號鎖定的符號說明：
  Package.json裡^、~的版本控制符號意義
  package.json #dependencies

今天也順利關窗惹！