一文搞定前端包管理工具

前言

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

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