一文搞定前端包管理工具

前言

工欲善其事，必先利其器。

nvm 安裝管理node

//安裝nvm前請提早卸載原有的node。
//下載地址：https://github.com/coreybutler/nvm-windows/releases
nvm                  // 會提示nvw下的相關命令
nvm ls               // 查看已安裝node版本 nvm list 也行
nvm install vXX      // 安裝對應vXX版本的node eg:nvm install v13.9.0
nvm uninstall vXX    // 卸載對應vXX版本的node eg:nvm uninstall v13.9.0
nvm use xxx          // 選擇使用XXX版本

若是嫌棄網速慢，畢竟在國外，能夠換源，修改安裝目錄下的settings.txt文件：
root: D:\nvm
path: D:\nvm\nodejs
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/
個人精力告訴我，安裝新版本node時淘寶npm源基本不能工做，下載錯誤，舊版隨意。
複製代碼

包管理器安裝方式

• npm

  node 自帶
  npm install npm -g                                          //升級到新版本
  複製代碼

• yarn

  能夠下載 .msi文件安裝                                       //安裝時自動配置環境變量
  npm install yarn -g                                         //本身配置環境變量
  複製代碼

• pnpm

  npm add pnpm -g                                             //查看源
  pnpm add pnpm -g                                            //升級到新版本
  複製代碼

源

• npm

  npm config get registry                                     //查看源
  yarn config set registry http://registry.npm.taobao.org     //切淘寶源
  複製代碼

• yarn

  yarn config get registry                                    //查看源
  yarn config set registry http://registry.npm.taobao.org     //切淘寶源
  複製代碼

• pnpm

  pnpm config get registry                                    //查看源
  pnpm config set registry http://registry.npm.taobao.org     //切淘寶源
  複製代碼

安裝

• npm

  npm install 包名 or  npm install 包名 -S    //默認寫入dependencies
  npm install 包名 -D                         //寫入devDependencies
  npm install 包名 -g                         //全局
  npm install 包名@版本號                     //添加版本號
  複製代碼

• yarn

  yarn add 包名                               //默認寫入dependencies
  yarn add 包名 -D                            //默認寫入devDependencies
  yarn global add 包名                        //全局
  yarn add 包名@版本號                        //添加版本號
  複製代碼

• pnpm

  pnpm 能夠使用install  add  來安裝，install 還能夠簡寫成 i
  pnpm add 包名                               //默認寫入dependencies
  pnpm add 包名 -D                            //默認寫入devDependencies
  pnpm add -g 包名                            //全局
  pnpm add 包名@版本號                        //添加版本號
  複製代碼

查看

• npm

  npm list --depth 0                          //查看項目中的包  depth 表明深度，可選參數
  npm list -g --depth 0                       //查看全局包  depth 表明深度，可選參數
  複製代碼

• yarn

  pnpm list -r --global                       //查看全局包  depth 表明深度，可選參數
  yarn list                                   //查看項目中的包  depth 表明深度，可選參數，包含依賴
  複製代碼

• pnpm

  pnpm list -r                                //查看全局包  depth 表明深度，可選參數
  yarn list -r                                 //查看項目中的包  depth 表明深度，可選參數，包含依賴
  複製代碼

移除

• npm

  npm uninstall 包名                          //移除包
  npm uninstall 包名 -g                       //移除全局包
  複製代碼

• yarn

  yarn remove 包名                            //移除包
  yarn global remove 包名                     //移除全局包
  複製代碼

• pnpm

  pnpm remove 包名                            //移除包
  pnpm remove 包名 --global                   //移除全局包
  pnpm remove 包名 -D                         //移除devDependencies包
  複製代碼

更新

• npm

  npm update 包名                             //更新包
  npm update 包名 -g                          //更新全局包
  複製代碼

• yarn

  yarn upgrade 包名                           //更新包
  yarn global upgrade 包名                    //更新全局包
  複製代碼

• pnpm

  pnpm up                                     //更新全部依賴項
  pnpm up --latest                            //更新全部依賴項。忽略在package.json
  pnpm upgrade 包名                           //更新包
  pnpm upgrade 包名 --global                  //更新全局包
  複製代碼

清除緩存

• npm

  npm cache clear
  複製代碼

• yarn

  yarn cache clean
  複製代碼

運行任務

• npm

  npm run
  複製代碼

• yarn

  yarn run
  複製代碼

• pnpm

  pnpm run
  複製代碼

修改全局安裝和緩存位置

• npm

  npm config list                                         //查看配置信息
  npm config get prefix                                   //查看全局安裝的位置
  npm config set prefix 新路徑                            //修改全局安裝的位置
  npm config get cache                                    //查看緩存的位置
  npm config set cache 新路徑                             //修改緩存的位置
  複製代碼

• yarn

  yarn config                                             //查看配置信息
  yarn config get global-folder 或 yarn global dir        //查看全局安裝的位置
  yarn config set global-folder 新路徑                    //修改全局安裝的位置
  yarn config get cache-folder                            //查看緩存的位置
  yarn config set cache-folder 新路徑                     //修改緩存的位置
  yarn global bin                                         //檢查當前yarn 的 bin的 位置
  複製代碼

• npm

  pnpm config list                                        //查看配置信息
  pnpm config get prefix                                  //查看全局安裝的位置
  pnpm config set prefix 新路徑                           //修改全局安裝的位置
  pnpm config get cache                                   //查看緩存的位置
  pnpm config set cache 新路徑                            //修改緩存的位置
  複製代碼

常見問題

• 若是遇到「xxx沒法加載文件 xxx.ps1，由於在此係統上禁止運行腳本。有關詳細信息，請參閱 https:/go.microsoft.co m/fwlink/?LinkID=135170 中的 about_Execution_Policies。」的問題，能夠刪除這個ps1解決。
• yarn全局安裝的包控制檯若是找不到，能夠使用yarn global dir查看全局安裝的位置，將完整的bin路徑添加到系統環境變量中去，例如：E:\MyApp\Yarn\global\node_modules.bin