pnpm的使用

阅读数:220 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、准备工作

需要安装node.js

pnpm全称是performant npm意为高性能的npm

1、depedencies和devDependencies的区别

（1）在webpack打包的时候，它是按需打包，处理depedencies和devDependencies是一样的处理。

（2）把包放在depedencies或devDepedencies里可以让开发人员的开发环境（包）保持一致，因为npm install会自动下载devDepedencies和depedencies下面的模块。（个人理解，如果只是做项目开发，包放在哪个下面都无所谓）

（3）如果发布npm包的时候，还是有区别的，depedencies下的作为依赖，一起下载，devDepencies下面的模块就不会自动下载。

二、安装配置

1、安装pnpm

npm install -g pnpm

如果windows上遇到"无法加载...pnpm.ps1，因为此系统上禁止运行脚本"，执行

set-ExecutionPolicy RemoteSigned

2、设置镜像源

pnpm config set registry https://registry.npm.taobao.org/

# 检查
pnpm config get registry

三、基本用法

1、安装包

pnpm install = pnpm i = pnpm add，三者完全等同。

// 安装所有依赖
pnpm install
pnpm install pkg-name  // 
pnpm i pkg-name
pnpm add pkg-name    // -S  默认写入dependencies
pnpm add -D    // -D devDependencies
pnpm add -g    // 全局安装

2、移除

pnpm remove pkg-name                            //移除包
//或
pnpm rm pkg-name
pnpm remove pkg-name --global                   //移除全局包

3、更新

pnpm up                //更新所有依赖项
pnpm upgrade 包        //更新包
pnpm upgrade 包 --global   //更新全局包

4、设置存储路径

全局安装路径和缓存路径默认在C盘 C:\Users\Administrator\AppData\Local\pnpm 下

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

5、支持npm script

pnpm cmd

6、pnpm相关的.gitignore

# pnpm 商店目录 #
.pnpm-store

# 锁文件 #
pnpm-lock.yaml
shrinkwrap.yaml

# node_modules #
/node_modules

# 生产环境变量文件 #
.env.local
.env.*.local

# 打包输出 #
/dist
/build

# 日志文件 #
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# 编辑器目录和文件 #
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# 操作系统生成的文件 #
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db

# 其他可能需要忽略的文件或目录 #
# 例如，如果你的项目构建过程中生成了其他文件或目录，你也应该将它们添加到这里。
.pnpm-store 这是 pnpm 用于存储依赖项的目录，类似于 npm 的 node_modules，但是它是全局存储的，用于跨项目共享包。
pnpm-lock.yaml 和 shrinkwrap.yaml 这些是 pnpm 的锁文件，用于确保依赖项的一致性。通常，你会将 pnpm-lock.yaml 文件提交到版本控制中，以确保团队成员和生产环境中安装相同版本的依赖项。如果你决定不提交这个文件，你应该将其添加到 .gitignore 中。
node_modules 即使你使用 pnpm，你也可能在项目目录中生成一个 node_modules 文件夹，它将包含符号链接到 pnpm 商店中的实际包。
.env 文件 包含可能敏感的环境变量，不应该提交到版本控制。
打包和日志文件 包括 dist、build 和各种日志文件。
编辑器配置和操作系统文件  这些是个人编辑器配置和操作系统自动生成的文件，不应该共享。

四、新建vite+vue3项目

pnpm create vite xxx (xxx项目名称)
#选择vue or react
#选择js or typescript
cd 项目名称
pnpm install
pnpm run dev
相关推荐
npm工具的学习
一、概述 npm的全称是Node Package Manager，是随同ＮodeJS一起安装的包管理和发布工具。 不过现在更推荐使用pnpm工具，使用过pnpm就真得不太愿意用npm了，因此pnpm一
package-lock.json
一、package.json package.json文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本。 二、package-lock.json package-lock.json文件
npm、yarn、pnpm
一、概述 yarn命令行 npm命令行 yarn npm yarn add package --dev npm install package --save-dev yarn a
vite+vue3+pinia+pnpm+element-plus开发记录
一、使用pnpm新建项目 可以使用npm 或yarn或pnpm来初始化Vite项目 pnpm create vite xxx(项目名称) #选择vue #选择js cd xxx (进入项目目录) #安