- 名詞解析：
- package => 代碼模塊柜砾，這里指 npm package
前言
本文主要講述 nodejs 下的 node 版本管理工具和模塊管理工具湃望。
隨著時間的推移，后續(xù)會總結常用工具痰驱，如：yarn证芭、npm、npx担映、nrm废士、pnpm 等等在實踐過程中碰過的問題。
nodejs 的包管理工具
npm(node package manager)簡單的說是一個面向 nodejs 的包管理工具蝇完。其包的結構使您能夠輕松跟蹤依賴項和版本官硝，使用 npm 可以輕松發(fā)布包矗蕊、下載包。
npm 由三個獨立的部分組成氢架，
- 托管 package 的網(wǎng)站傻咖，用于查找、發(fā)布和配置 package岖研。
- npm: https://www.npmjs.com/
- yarn: https://yarnpkg.com/
- 注冊表（registry）卿操。儲存 package 詳細信息 的數(shù)據(jù)庫
- cli(開發(fā)者操作使用的工具)
nodejs 默認內置 npm，只需要按照好 nodejs 則可正常使用 npm孙援。
在 npm@v5.2.0 開始引入了 npx硬纤，npx 是 npm 的一個包執(zhí)行器，npx 提高從 npm 注冊表使用軟件包的體驗赃磨。
另外 nodejs 常用的包管理工具還有 yarn筝家、pnpm
Install
Install yarn
在 window 端 yarn 版本通過下載軟件安裝，下載地址
也可以通過 cli 下載 yarn邻辉，可查看教程 https://yarn.bootcss.com/docs/install#mac-rc
# window
npm install --global yarn
# Ubuntu/Debain
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ rc main" | sudo tee /etc/apt/sources.list.d/yarn.list
# CentOS/MacOs
curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --rc
Install pnpm
pnpm 詳細安裝教程請前往官網(wǎng)https://yarn.bootcss.com/docs/install
- 通過 npm 安裝
npm install -g pnpm@next
- 通過腳本安裝
# POSIX 類系統(tǒng)
curl -fsSL https://get.pnpm.io/install.sh | PNPM_VERSION=7.0.0-beta.2 sh -
# 如果沒有安裝 curl溪王，可以使用 wget：
wget -qO- https://get.pnpm.io/install.sh | PNPM_VERSION=7.0.0-beta.2 sh -
# 在 Windows 系統(tǒng)上（PowerShell
$env:PNPM_VERSION='7.0.0-beta.2' ; iwr https://get.pnpm.io/install.ps1 -useb | iex
Usage
Usage Cli
nodejs 模塊包中有可執(zhí)行的 cli 工具。cli 工具包的運行方式有 2 鐘：
- 通過全局安裝工具包值骇，系統(tǒng)自動生成可直接運行的快捷方式莹菱。
# 全局安裝
npm install -g <cli_package>
pnpm add -g <cli_package>
yarn global add <cli_package>
# 全局cli可直接執(zhí)行
<cli_package>
- 通過局部安裝工具包，需要使用 npm 執(zhí)行包運行吱瘩，如 yarn道伟、npx。
# 局部安裝
npm install <cli_package>
pnpm add <cli_package>
yarn add <cli_package>
# 局部運行cli
npm run <cli_package>
npx <cli_package>
pnpm <cli_package>
yarn <cli_package>
安裝包
- 全局安裝
全局安裝的默認地址
# npm
npm i -g <packageName>
- 局部安裝
# npm
npm i --save <packageName>
-
根據(jù)參數(shù)選擇安裝模式：
- npm 添加-g 使碾，yarn 添加 global 蜜徽，為全局安裝
- 添加 -D 或 --save-dev 則安裝為工具包，該包不參加打包
- 添加 -S 或 --save 則安裝為依賴包票摇， 該包參加打包工具打包
# npm拘鞋、pnpm一樣
npm install <packageName>
npm i <packageName>
npm i -g <packageName>
npm i -D <packageName>
npm i --save-dev <packageName>
npm i -S <packageName>
npm i --save <packageName>
#yarn
yarn global add <packageName>
yarn add <packageName>
yarn add -D <packageName>
yarn add --save-dev <packageName>
yarn add -S <packageName>
yarn add --save <packageName>
如果出現(xiàn)以下錯誤： npm err! Error: connect ECONNREFUSED 127.0.0.1:8087
解決辦法為：npm config set proxy null
初始化庫步驟
# npm
npm init -y
npm install webpack --save-dev
# yarn
yarn init -y
yarn add webpack --save-dev
查看模塊
- 全局安裝的所有模塊
# npm
npm list -g
pnpm list --global
- 當前文件夾安裝的所有模塊
# npm
npm list
pnpm list
yarn list --flat
- 查看指定模塊
# npm
npm list <packageName>
pnpm list <packageName>
yarn list <packageName>
npm 添加用戶
資源庫中注冊用戶（使用郵箱注冊）
# npm
npm adduser
發(fā)布模塊
# npm
npm publish --registry=https://registry.npmjs.org/
創(chuàng)建文件
touch
更新模塊
npm 更新
# npm
npm update <packageName>
yarn 更新
- 下載 npm-check-updates
- yarn upgrade-interactive --latest（推薦）
- yarn upgrade package@version
// 先下載
yarn global add npm-check-updates
// 更新包（yarn.lock和package.json同步更新）
ncu --upgrade --upgradeAll && yarn upgrade
yarn upgrade-interactive --latest
// 需要手動選擇升級的依賴包，按空格鍵選擇矢门，a 鍵切換所有盆色，i 鍵反選選擇
yarn upgrade package@version
// yarn.lock和package.json都會更新，但是會進行版本鎖定 "echarts": "4.2.0-rc.2"
pnpm 更新
# 深度更新最多100個子目錄的所有包
pnpm --recursive update
# 更新typescript到每個包的最新版本
pnpm --recursive update <packageName>
卸載安裝
# npm
npm uninstall <packageName>
# yarn
yarn remove <packageName>
# pnpm
pnpm remove <packageName>
搜索模塊
這個命令會打開一個全屏的終端界面祟剔，你可以在這里搜索和安裝 npm 注冊表中的包隔躲。
# npm
npm search <packageName>
# yarn
yarn search <packageName>
配置項
注意：如果修改了全局包文件夾目錄位置(如修改后為 path_gloabl[D:\npm\node_global])，則需要在電腦環(huán)境變量 Path 上添加path_gloabl物延，
當使用 npm|yarn set config xxx xxx 后宣旱，磁盤的用戶文件夾下會生成一個.npmrc|.yarnrc 的文件，以下操作或者可在文件夾：C:\Users<Administrator> 上修改文件配置.npmrc
- 查看總配置列表
# npm
npm config ls
npm config list
# yarn
yarn config list
- 設置配置代理
用于設置代理協(xié)議教届，如：socks\http 等响鹃。
因為有些包是存在 http,有些在 socks（基本默認）
因此需要在特定情況下設置代理才能順利下載包
# npm
# 有時候再設置代理后無法下載包，則需要清空代理
npm config set proxy null
# 基本代理設置
npm config set proxy http://[ip]:[port]
npm config set https-proxy http://[ip]:[port]
# 需要認證代理設置
npm config set proxy http://username:password@server:port
npm config set https-proxy http://username:pawword@server:port
# 清除代理設置
npm config delete proxy
npm config delete https-proxy
- 設置本地緩存文件夾和全局文件夾
在開發(fā)過程中案训，隨著時間的推移买置，開發(fā)者可能會按照了很多全局包。因為全部包的默認目錄一般在系統(tǒng)盤强霎，因此可以跳轉默認目錄忿项，也方便以后的管理。
緩存文件默認地址：C:\Users\Administrator\AppData\Roaming\npm-cache
全局包文件默認地址：C:\Users\Administrator\AppData\Roaming\npm\node_modules
npm config 允許使用 set\get 來設置或查看信息城舞。如下：
# npm
# 設置緩存
npm config set cache "D:\npm\node_cache"
# 設置全局
npm config set prefix "D:\npm\node_global"
# 設置鏡像源
npm config set registry "https://registry.npm.taobao.org"
# 查看緩存
npm config get cache
# 查看全局
npm config get prefix
# 查看鏡像源
npm config get registry
# yarn
# 設置緩存
yarn config set cache "D:\npm\node_cache"
# 設置全局
yarn config set prefix "D:\npm\node_global"
# 設置鏡像源
yarn config set registry "https://registry.npm.taobao.org"
# 查看緩存
yarn config get cache
# 查看全局
yarn config get prefix
# 查看鏡像源
yarn config get registry
清除緩存
有時候緩存包會與安裝包存在沖突轩触，這種情況需要清除緩存處理
# npm
npm cache clean # npm@v5
npm cache verify # npm@v6
鏡像設置
# npm
# 查看鏡像：
npm config get registry
yarn config get registry
# 設置永久鏡像，設置會被寫入到.npmrc|.yarnrc文件：
npm config set registry http://registry.npm.taobao.org/
npm config set registry https://registry.npmjs.org/
yarn config set registry https://registry.npm.taobao.org/
# 設置臨時鏡像家夺，只在本次命令使用
npm --registry https://registry.npm.taobao.org install <packageName>
yarn --registry https://registry.npm.taobao.org add <packageName>
- 常用鏡像源地址有：
npm --- https://registry.npmjs.org/
cnpm --- https://r.cnpmjs.org/
taobao --- https://registry.npm.taobao.org/
nj --- https://registry.nodejitsu.com/
rednpm --- https://registry.mirror.cqupt.edu.cn/
npmMirror --- https://skimdb.npmjs.com/registry/
deunpm --- http://registry.enpmjs.org/
切換鏡像源地址通過上述方式進行設置與查看脱柱，也可以直接使用nrm 包來設置，下面會講到拉馋。
- 使用淘寶源時或者嘗試 cnpm
安裝 cnpm 包
# npm
npm install -g cnpm --registry=https://registry.npm.taobao.org/
cnpm install <packageName>
當使用 cnpm -v/cnpm -version 查看版本時提示“cnpm 命令提示不是內部或外部命令”
原因：本地系統(tǒng)沒有添加 npm 模塊的環(huán)境變量榨为，所以不能識別命令。
解決： 將將全局安裝目錄 D:\npm\node_global 添加到環(huán)境變量
FAQ
全局包運行時報錯： SecurityError: (:) []煌茴，PSSecurityException
+ CategoryInfo : SecurityError: (:) []随闺，PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
原因：Windows 下 PowerShell 默認的權限級別是 Restricted，不允許執(zhí)行 PS 腳本（即.ps1 文件）蔓腐。如果在 Restricted 權限級別下運行矩乐，會得到上述錯誤
解決：Set-ExecutionPolicy RemoteSigned -Scope process
科普 window 執(zhí)行策略：
#更新執(zhí)行策略
Set-ExecutionPolicy <policy-name>
#policy-name可能的值
Unrestricted、RemoteSigned回论、AllSigned散罕、Restricted、Default傀蓉、Bypass笨使、Undefined
#將ExecutionPolicy改為Unrestricted，可以運行未簽名的腳本
Set-ExecutionPolicy Unrestricted
#查詢詳細策略
get-help about_Execution_Policise
node-sass 安裝錯誤
首先要排除 node-sass 版本是否與你安裝的 py2僚害、py3 有沖突硫椰，如果沒沖突則做下面操作。
排除 py 問題萨蚕，一般都是國內網(wǎng)絡不穩(wěn)定的問題了靶草。
那么我們有幾種常用方法：
- 設置特定包的淘寶源：
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
npm config set phantomjs_cdnurl=https://npm.taobao.org/mirrors/phantomjs/
npm config set electron_mirror=https://npm.taobao.org/mirrors/electron/
npm config set registry=https://registry.npm.taobao.org
上述操作可以在使用 npm install 安裝 node-sass、electron 和 phantomjs 時都能自動從淘寶源上下載岳遥。
- 使用 cnpm 淘寶源下載
npm install -g cnpm
cnpm install
- 使用 VPN
npm config set proxy (http://127.0.0.1:1080)此處是 VPN 的代理地址
npm i node-sass
#下載完成后刪除 http 代理
npm config delete proxy
npm ERR! code EUNSUPPORTEDPROTOCOL. Unsupported URL Type
原因: npm 版本過低
解決：
# 查看 npm 版本
npm -v
# 更新版本
npm install -g npm
nrm
nrm(npm registry manager )是 npm 的鏡像源管理工具奕翔，有時候國外資源太慢，那么我們可以用這個來切換鏡像源浩蓉。
install nrm
npm install -g nrm
Usage nrm
# 查看可使用鏡像源
# npm -------- https://registry.npmjs.org/
# yarn ------- https://registry.yarnpkg.com/
# cnpm ------- http://r.cnpmjs.org/
# * taobao ----- https://registry.npm.taobao.org/
# nj --------- https://registry.nodejitsu.com/
# npmMirror -- https://skimdb.npmjs.com/registry/
# edunpm ----- http://registry.enpmjs.org/
nrm ls
# 切換鏡像源
nrm use <url>
