一文搞定前端包管理工具

4,216 阅读4分钟

前言

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

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/
或者
set "NVMW_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node"
set "NVMW_NPMJS_COM_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                                     //查看源
    npm config set registry https://registry.npmmirror.com     //切淘宝源
    
  • yarn
    yarn config get registry                                    //查看源
    yarn config set registry https://registry.npmmirror.com     //切淘宝源
    yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/ //针对特定包
    yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
    
  • pnpm
    pnpm config get registry                                    //查看源
    pnpm config set registry https://registry.npmmirror.com     //切淘宝源
    

安装

  • 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
    yarn list -r --global                       //查看全局包  depth 代表深度,可选参数
    yarn list                                   //查看项目中的包  depth 代表深度,可选参数,包含依赖
    
  • pnpm
    pnpm list -r                                 //查看全局包  depth 代表深度,可选参数
    pnpm 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 clean --force
    
  • 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的 位置
    
  • pnpm
    pnpm config list                                        //查看配置信息
    pnpm config set store-dir "路径"                        //全局仓库路径
    pnpm config set global-dir "路径"                       //修改全局安装的位置
    pnpm config set global-bin-dir "路径"                   //全局bin路径
    pnpm config set state-dir "路径"                        //pnpm-state.json文件的目录
    pnpm config set cache-dir "路径"                        //修改缓存的位置
    pnpm config get global-dir                              //查看全局安装的位置
    pnpm config get cache-dir                               //查看缓存的位置
    pnpm config get global-bin-dir                          //查看全局bin路径
    pnpm config get store-dir                               //查看全局仓库路径
    

常见问题

  • 如果遇到“xxx无法加载文件 xxx.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。”的问题,可以删除这个ps1解决。因为是权限不够引起的,还可以给他权限来搞定
get-ExecutionPolicy // Restricted
Set-ExecutionPolicy RemoteSigned
get-ExecutionPolicy // RemoteSigned
  • yarn全局安装的包控制台如果找不到,可以使用yarn global dir查看全局安装的位置,将完整的bin路径添加到系统环境变量中去,例如:E:\MyApp\Yarn\global\node_modules.bin