2023了,是时候使用pnpm了!

本文介绍了2023年为何应考虑使用pnpm,一个性能优于npm和Yarn的JavaScript包管理工具,特别强调了其在性能、磁盘空间利用上的优势,以及如何从npm或Yarn平稳过渡到pnpm的步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

2023了,是时候使用pnpm了!

Excerpt

2023了,是时候使用pnpm了!


什么是pnpm

        pnpm代表performant npm(高性能的npm),同npmYarn,都属于Javascript包管理安装工具,它较npmYarn在性能上得到很大提升,被称为快速的,节省磁盘空间的包管理工具。

对比npm,yarn

图片

![图片](data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='1px' height='1px' viewBox='0 0 1 1' version='1.1' xmlns='SVG namespace' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3E%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0'%3E%3Cg transform='translate(-249.000000, -126.000000)' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)

![图片](data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='1px' height='1px' viewBox='0 0 1 1' version='1.1' xmlns='SVG namespace' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3E%3C/title%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0'%3E%3Cg transform='translate(-249.000000, -126.000000)' fill='%23FFFFFF'%3E%3Crect x='249' y='126' width='1' height='1'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/svg%3E)

通过比对,pnpm牛逼,还有特有的功能,能够管理node.js版本,内容可寻址存储。

npm或yarn转pnpm

操作步骤:

  1. 1.

    全局安装pnpm

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

npm install -g pnpm

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

 
  1. 1.

    删除npmyarn生成的node_modules

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

# 项目目录下运行或手动物理删除
  1. 1.

    pnpm import从其他软件包管理器的lock 文件生成 pnpm-lock.yaml,再执行pnpm install --frozen-lockfile(相当于npm ci)生成依赖,防止没有lock文件意外升级依赖包,导致项目出错

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

# 生成`pnpm-lock.yaml`

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

# 安装依赖

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

pnpm install --frozen-lockfile
  1. 1.

    删除npmyarn生成的lock文件

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

# 删除package-lock.json
  1. 1.

    项目中的npm命令等修改为pnpm,包括README文档、运行命令等

常用等价命令

npm命令

pnpm等价命令

npm install

pnpm install

npm i pkg

pnpm add pkg

npm run cmd

pnpm cmd

管理 Node.js 环境,安装并使用指定版本的 Node.js。

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

// 安装 LTS 版本的 Node.js 

pnpm用起来吧

### 如何在 IntelliJ IDEA 中配置和使用 pnpm #### 配置 Node.js 和 npm 为了能够在 IntelliJ IDEA 中使用 pnpm,首先需要确保本地已正确安装 Node.js 及其附带的 npm 工具。可以通过以下方式验证是否已成功安装 Node.js 和 npm: ```bash node -v && npm -v ``` 如果未安装,则需按照官方文档指引完成安装过程[^3]。 #### 安装 pnpm pnpm 是一种高效的包管理工具,能够显著减少磁盘空间占用并优化依赖解析速度。通过全局安装的方式引入 pnpm 到开发环境中: ```bash npm install --global pnpm ``` 完成后可通过如下命令确认 pnpm 是否正常工作: ```bash pnpm -v ``` 此操作应返回当前安装版本号以表明安装无误[^1]。 #### 在 IntelliJ IDEA 中集成 pnpm ##### 设置 Node.js 解释器路径 进入 **File | Settings | Languages & Frameworks | Node.js and NPM** 菜单项,在指定区域设定好对应版本的 Node.js 执行文件地址以及附加参数选项(如有必要)。这一步骤对于后续识别 `package.json` 文件及其脚本至关重要。 ##### 替代默认 package manager 为 pnpm 在同一设置页面下拉至底部部分寻找 “Package Manager” 下拉框,默认情况下会显示为 `npm` 或者 `yarn` 。将其更改为 `pnpm` ,从而让 IDE 明确知晓应该调用哪个具体工具来处理项目的依赖关系管理和构建流程等相关事宜。 另外需要注意的是,当切换到新的包管理方案之后可能还需要重新加载整个工程或者手动触发一次初始化动作以便同步最新的锁文件状态(`pnpm-lock.yaml`)与实际目录结构保持一致[^4]。 #### 创建新 Vue 项目实例演示 假设现在要基于 pnpm 构建一个新的 Vue 应用程序作为例子展示上述方法的实际效果: ```bash pnpm create vue@latest my-vue-app cd my-vue-app pnpm install pnpm run dev ``` 以上几步分别完成了模板选择、环境搭建、依赖注入到最后启动服务端口监听等一系列自动化任务安排。期间任何涉及外部库检索的动作都将由事先绑定好的 pnpm 来接管执行。 #### 常见错误排查指南 - 如果遇到类似于“The template root requires exactly one element.”这样的报错信息时,请检查 ESLint 插件配置是否恰当,并调整 `.eslintrc.*` 类型配置文件中的规则定义满足最新标准需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值