原文鏈接：https://mp.weixin.qq.com/s/nijxVWj-E5U08DX2fl3vgg

最近有個剛學前端的小夥伴問我：“為什麼我的node_modules這麼大？為什麼別人裝依賴那麼快？npx到底是啥玩意兒？”

相信不少人都跟他一樣，對npm的認知還停留在“npm install”階段。今天我就來分享幾個超級實用的npm技巧，幫你擺脱依賴安裝的噩夢！

一、package.json裏的秘密

先來説説package.json這個文件，它可不僅僅是項目的身份證。

dependencies和devDependencies到底啥區別？

簡單説就是：dependencies是項目運行時必須的依賴，比如react、vue這些。devDependencies是開發時才需要的，比如eslint、webpack這些打包工具。

看個例子就明白了：

{
  "dependencies": {
    "react": "^17.0.2",  // 項目運行必須
    "axios": "^0.21.1"   // 項目運行必須
  },
  "devDependencies": {
    "eslint": "^7.18.0",  // 只有開發時需要
    "webpack": "^5.11.0"  // 只有開發時需要
  }
}

版本號前的^和~有啥講究？

這個特別重要！~表示允許小版本更新，^允許次版本更新。

舉個例子：

• ~1.2.3：可以更新到1.2.x，但不能到1.3.0
• ^1.2.3：可以更新到1.x.x，但不能到2.0.0

{
  "dependencies": {
    "lodash": "~4.17.0",  // 只會更新到4.17.x
    "moment": "^2.29.0"   // 可以更新到2.x.x
  }
}

二、npm install的隱藏技巧

你是不是還在傻傻地等着npm install慢慢下載？試試這兩個技巧：

1. 使用npm ci替代npm install

在CI/CD環境或者想要確保依賴一致時，用npm ci比npm install更靠譜：

npm ci  # 完全按照package-lock.json安裝，速度更快更穩定

2. 離線優先模式

如果你之前安裝過相同的依賴，可以這樣加速：

npm install --prefer-offline  # 優先使用本地緩存

三、npx：不用全局安裝也能運行命令

這是我最近發現的神器！以前要全局安裝腳手架工具，現在用npx直接運行：

# 以前需要先全局安裝
npm install -g create-react-app
create-react-app my-app

# 現在直接用npx
npx create-react-app my-app  # 自動下載運行，用完即刪

再舉個例子，想用webpack但不想全局安裝：

npx webpack --config webpack.config.js  # 臨時使用webpack

四、安全漏洞檢查

現在網絡安全這麼重要，npm也提供了安全檢查功能：

npm audit  # 檢查項目依賴的安全漏洞
npm audit fix  # 自動修復可修復的漏洞

如果發現嚴重漏洞，最好立即處理。我曾經有個項目就因為依賴的舊版本庫有漏洞，差點出大事！

五、其他實用小技巧

清理緩存
有時候安裝出問題，可能是緩存作祟：

npm cache clean --force  # 清理npm緩存

查看包信息
想了解某個包的信息？不用去官網：

npm view react  # 查看react包的詳細信息

快速初始化項目
不想一步步回答npm init的問題？

npm init -y  # 一鍵生成默認package.json

實際工作場景示例

假設你要創建一個新的React項目並檢查安全：

# 1. 創建項目目錄
mkdir my-react-app
cd my-react-app

# 2. 快速初始化
npm init -y

# 3. 安裝React（生產依賴）
npm install react react-dom

# 4. 安裝開發工具（開發依賴）
npm install -D webpack webpack-cli

# 5. 檢查安全漏洞
npm audit

# 6. 如果有漏洞就修復
npm audit fix

寫在最後

用了這些技巧後，我們團隊的依賴安裝時間平均減少了40%，再也不用對着node_modules發呆了。

其實工具用的好，真的能省下不少時間。這些技巧都是我踩了無數坑後總結出來的，希望對你也有幫助！

你還有什麼好用的npm技巧？歡迎在評論區分享交流～

PS：如果你發現某個依賴安裝特別慢，可以試試切換npm源到淘寶鏡像，速度會快很多哦！

npm config set registry https://registry.npmmirror.com/