首页 前端知识 快速,节省的包管理神器 - pnpm

快速,节省的包管理神器 - pnpm

2024-10-30 21:10:43 前端知识 前端哥 104 880 我要收藏

pnpm

节省磁盘空间

  • 如果你用到了某依赖项的不同版本,只会将不同版本间有差异的文件添加到仓库。

  • 所有文件都会存储在硬盘上的某一位置。

提高下载速度

  • 依赖解析。 仓库中没有的依赖都被识别并获取到仓库。

  • 目录结构计算。 node_modules 目录结构是根据依赖计算出来的。

  • 链接依赖项。 所有以前安装过的依赖项都会直接从仓库中获取并链接到 node_modules。

安装方式

  1. win上使用PowerShell

iwr https://get.pnpm.io/install.ps1 -useb | iex
  1. npm安装

我们提供了两个 pnpm CLI 包, pnpm 和 @pnpm/exe。

  • pnpm 是 pnpm 的普通版本,需要 Node.js 运行。

  • @pnpm/exe 与 Node.js 一起打包成可执行文件,因此它可以在没有安装 Node.js 的系统上使用。

npm install -g pnpm

或者

npm install -g @pnpm/exe

卸载 pnpm

npm rm -g pnpm

查看版本

pnpm -v

查看镜像

pnpm config get registry

设置阿里云镜像源
pnpm config set registry https://registry.npmmirror.com/

设置环境目录

# pnpm 全局 bin 路径

pnpm config set global-bin-dir "D:\Program Files\nodejs\pnpm\.pnpm-bin-dir"
 
# pnpm 全局缓存路径
pnpm config set cache-dir "D:\Program Files\nodejs\pnpm\.pnpm-cache"
 
# pnpm 全局安装路径
pnpm config set global-dir "D:\Program Files\nodejs\pnpm\.pnpm-global"
 
# pnpm 创建 pnpm-state.json 文件的目录
pnpm config set state-dir "D:\Program Files\nodejs\pnpm\.pnpm-state"
 
# pnpm 全局仓库路径(类似 .git 仓库)
pnpm config set store-dir "D:\Program Files\nodejs\pnpm\.pnpm-store"

配置环境变量

在系统环境变量中 Path添加路径

D:\Program Files\nodejs\pnpm.pnpm-bin-dir

常用命令

# 创建一个 package.json 文件
pnpm init
 
# 安装软件包及其依赖的任何软件包(如果 workspace 有配置会优先从 workspace 安装)
pnpm add <pkg>
 
# 安装项目所有依赖
pnpm install
 
# 更新软件包的最新版本
pnpm update
 
# 移除项目依赖
pnpm remove
 
# 运行脚本
pnpm run
 
# 以一个树形结构输出所有的已安装 package 的版本及其依赖
pnpm list


pnpm add <pkg> -S    // -S  默认写入dependencies
pnpm add <pkg> -D    // -D devDependencies
pnpm add <pkg> -g    // 全局安装

管理配置文件

全局配置文件位于以下位置之一:

如果设置了 环境变量,则为XDG_CONFIG_HOME/pnpm/rc

在 Windows 上:~/AppData/Local/pnpm/config/rc
在 macOS 上:~/Library/Preferences/pnpm/rc
在 Linux 上:~/.config/pnpm/rc
pnpm config

命令行
set <key> <value>
设置config中提供的key,和相对应的value

get <key>
打印config中提供的key对应的value

delete <key>
从config文件中删除配置过的key。

list
显示所有config的设置。

配置项
--global, -g
在全局配置文件中设置配置项。

--location
当设置为project时,将使用最近的package.json所在目录下的.npmrc文件。

当设置为global时,性能与设置--global选项相同。

--json
以JSON格式显示所有的配置设置。

安装vue-cli

是否安装了vue-cli通过命令查看

vue -V 

有则会输出类似下面的版本信息
@vue/cli 5.0.8

安装命令

pnpm install -g @vue/cli

  • 权限问题导致报错

 ERROR  The CLI has no write access to the pnpm home directory at D:\Program Files\nodejs\pnpm\.pnpm-bin-dir

修改目录权限(D:\Program Files\nodejs) 使当前用户有修改等权限

在次执行命令即可。

pnpm setup

npm 的独立安装脚本使用此命令。 例如,在 https://get.pnpm.io/install.sh中。

安装程序执行以下操作:

  • 为 pnpm CLI 创建一个主目录

  • 通过更新 shell 配置文件将 pnpm 主目录添加到 PATH

  • 将 pnpm 可执行文件复制到 pnpm 主目录

官方文档

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19696.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!