iT邦幫忙

0

npm 簡介

npm

下載

nvm

  • 用來管理多個版本的 npm
  • 可以進行切換

建立環境

  • 必須要有 package.json 才能安裝其他套件
  // 專案初始化 & 建立 package.json
  // -f 表示快速建立
  npm init -f 

package.json

{
  "name": "專案名稱",
  "version": "專案版號",
  "description": "描述",
  "main": "index.js", // entry point "專案進入點"
  "scripts": {
    // 此為 test command
    // npm script (可以將各種指令組合一起輸出)
    
    // 只需要打 npm start 即可
    // 亦可使用 F1 VSCode 會列出所有可用 script
    "start": "node start app.js" // 簡化指令
  },
   "keywords": [ "關鍵字" ],
  "repository": {
    "type": "git",
    "url": "上github建立專案的網址"
  },
  "author": "作者名",
  "license": "專案版權",  // ISC MIT
  "devDependencies": {
    // 專案開發時使用的套件,專案輸出時不會加入
    "eslint": "^5.16.0",
  },
  "dependencies": {
    // 專案上線時相依的套件,專案輸出時會加入
    "axios": "^0.19.0"
  }
}

安裝套件 (axios為例)

  • npm help 列出指令列表
  • cls VSCode 清空 Console 用
  // i 為 install 縮寫
  npm i axios
  npm i lodash@4.17   // 可以指定版本號

  // --save-dev 會把套件加入 devDependencies
  npm i axios --save-dev

  // 更新套件
  npm update lodash

  // 解除安裝
  npm uninstall 套件名 

全域安裝 (nodemon為例)

  • -g 表全域安裝,安裝在電腦上而非該專案
  • 依需求選用,各專案可能用的版本不同
  • npm root -g 可以查詢全域的套件,安裝在哪?
  • 可能會需要設定顯示隱藏檔案
  • nodemon 用來監控專案改動,自動reload (類似LiveServer)
  • Ctrl + C 關閉 nodemon
    npm i -g nodemon
    console.log(123) // index.js
    // VSCode Console 打上 nodemon 送出即可運行
    // 會監測任何 index.js的改動 並 reload

查詢安裝的套件

  • 未加參數,會將所有相依都呈現出來 (沒必要)
    // 只顯示第一層套件
    npm list --depth 0
    
    +-- axios@0.19.0
    +-- eslint@5.16.0
    +-- eslint-config-airbnb-base@13.1.0
    `-- eslint-plugin-import@2.17.3

版本號介紹 (8.2.6)

  • 8 首個數字代表主版本 (巨大改動)
  • 2 代表次版本 (新功能)
  • 6 代表更新 (Patch,Bug Fix)

package.json 版號標記

  • 不給與標記,即安裝該版本
  • ^ 表更新至最新的次版本 (不會更新主版本)
  • ~ 表更新至最新的更新 (Patch)
    • 最新版本 (不建議!!!)

安裝完成後

  • 安裝的套件檔案會放在 node_modules 裏面
  • 記得要在 .gitignore 忽略 node_modules

使用他人的專案

  • git clone ~url .
  • 使用 npm i 就會自動安裝所有套件了
  • npm i --production 可以不安裝開發用的相依

參考資料


尚未有邦友留言

立即登入留言