npm

下載

• npm 官方下載
• 選用 LTS 較穩定 (LongTermSupport)
• nvm 官方下載
• 使用 npm -v 確認是否安裝完成

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 可以不安裝開發用的相依

參考資料

• 從零開始: 使用NPM套件
• NPM Crash Course