npm、yarn 用法簡介


Posted by saffran on 2021-02-05

npm 的全名是 Node Package Manager,就是一個很大的「套件倉庫」

在開發時,有時候會想要找一些別人已經寫好的 open source 功能來使用,就可以透過 npm 來安裝這些套件、library

在裝 node.js 的時候,預設就會直接把 npm 一起安裝好
輸入指令 npm -v,如果有出現版本號,就代表有成功安裝 npm

npm 可以做什麼?

library 跟 module 跟 package 其實都是差不多的東西

  • 透過 npm 來管理這些「我下載下來的套件」
  • 也可以使用 npm 來把我寫好的套件上傳上去,讓全世界的人使用:
    我寫好了一個 module(一個功能),就可以把它包裝成一個 package(套件),然後上傳到 npm 上面,其他人就可以把這個 package 下載下來使用

npm install:以 left-pad 為例

其實 left-pad 這個 module 發生過一些很有名的事情,因為很多有名的 library 都有用到 left-pad,之前作者把這個 module 從 npm 上面拿掉,造成了其他使用它的 module 都沒辦法安裝,詳情可參考:如何看待 Azer Koçulu 刪除了自己的所有 npm 庫? 或是 抽掉 11 行程式就讓網路大崩塌!一場撞名事件,看開源的威力與權力衝突。

如何從 npm 找到一個套件,並裝在我的資料夾底下

假設,我想在我的專案資料夾中,使用 pad-left 這個套件

  1. 在專案資料夾,先輸入指令 npm init 來產生 package.json 檔案

package.json 這個檔案是用來「描述我這個專案」的
json 格式跟物件差不多,只是 json 的 key 一定要用「雙引號」包起來:

  • "main" 是「入口檔案」的意思
  • "dependencies" 是「依賴」的意思:我有裝了哪些套件
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "pad-left": "^2.1.0"
  }
}
  1. 輸入指令 npm install pad-left 或是 npm i pad-left 都可以
    i 就是 install 的簡寫而已)

補充資訊:

從 npm 5 以後,--save 就已經是預設的選項了,所以 npm install pad-left 不加 --save 也是可以的,一樣會把 dependencies 的資訊寫到 package.json 裡面去

這時,專案資料夾裡面就多了兩個東西:

  • package-lock.json 檔案
  • node_modules 資料夾
    npm 會把所有抓下來的 package 都放在 node_modules 資料夾裡面

var padLeft = require('pad-left') 來引入 module

這裡的 module 名稱只需要寫 'pad-left' 就可以了
原因是:
require 很智慧,會去各個地方找 pad-left 這個 module

  • 如果 module 名稱前面有加上 ./,就代表要在「同一個資料夾底下找」
  • 如果 module 名稱前面沒有加上 ./,那就會先去「系統(Node.js)內找」,如果系統沒有提供 pad-left 這個 module,那就會去 node_modules 資料夾找

因此,就可以在 node_modules 資料夾找到 pad-left 這個 module 了

var padLeft = require('pad-left')

console.log(padLeft(789, 10, '0'))
// output: 0000000789

npm scripts

在 package.json 裡面,有一個區塊是 "scripts"

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },

"scripts" 可以先寫好一些指令,當我用 npm 執行 test 指令時,就會幫我執行 echo \"Error: no test specified\" && exit 1 這行指令

例如:
當我要執行一個檔案時,我就會輸入指令 node index.js
但是當專案變大時,可能會有很多個 js 檔案(index1.js, index2.js, home.js, main.js 等等)

每個 js 檔案看起來都很像入口點(很像是我應該要執行的檔案),我不知道是要執行哪一個,這時該怎麼辦?

方法一:
在 package.json 的 "main" 先寫好「入口檔案」

"main": "index.js",

方法二:
"scripts" 寫上這行 "start": "node index.js"
意思就是:
當我執行 start 指令時,npm 就會幫我執行 node index.js 這個指令

start就像是一個「別名」

  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

所以,我就可以輸入指令 npm run start
意思就是:我要用 npm 來執行 start 這個指令

就會幫我執行 node index.js

yarn:npm 以外的另一種選擇

yarn 是由 Facebook 開發的,可以把它想成是一個更新、更快速的 npm,因此,通常比較新的專案都會使用 yarn

安裝好 yarn 之後,使用指令 yarn -v 就可以看到版本(就代表我有安裝成功)

接著,要如何使用 yarn 呢?

用 yarn 安裝 dependencies 的套件

假設,我現在從 GitHub 上面 clone 下來一個專案(裡面不會有 node_modules,只會有 package.json 檔案)

第一步:我就必須先執行指令 yarn 或是 yarn install(就等同於 npm install 的作用),yarn 就會把 package.json 的 dependencies 有寫到的所有套件(node_modules)給安裝進來

用 yarn 安裝新的套件

在 npm 要安裝新的套件,要使用指令 npm install pad-left

如果是用 yarn 安裝新的套件,就要使用指令 yarn add pad-left,同時也會把 pad-left 套件寫進 package.json 的 dependencies 裡面

用 yarn 執行 scripts

用 npm 執行 scripts,是使用指令 npm run start

如果是用 yarn 執行 scripts 的話:
使用指令 yarn run start 就可以執行 package.json 裡面 scriptsstart 指令,也就是 node index.js

  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

#javascript







Related Posts

那些年不懂的JS - Scope 範疇

那些年不懂的JS - Scope 範疇

給自己看的 JS 進階-變數

給自己看的 JS 進階-變數

HTML CSS position 屬性

HTML CSS position 屬性


Comments