pnpm practical tutorial

I. Overview

1. Smaller.
When using npm, dependencies will be installed repeatedly every time they are used by different projects. When using pnpm, dependencies are stored in content-addressable storage.

2. Faster

1. Dependency resolution. Dependencies that are not in the warehouse are identified and fetched to the warehouse.
2. Directory structure calculation. node_modulesThe directory structure is calculated based on dependencies.
3. Link dependencies. All previously installed dependencies will be fetched directly from the repository and linked to node_modules.

3. Flattening
When using npm or Yarn Classic to install dependencies, all packages are elevated to the root directory of the module directory. This leads to a problem, the source code can directly access and modify the dependencies, rather than as read-only project dependencies.

By default, pnpm uses symbolic links to add the project's direct dependencies to the root of the module directory.

You can see that when referenced cookiein express, only hard links are stored in dependencies, and the real packages are in the flattened first-level directory.

2. Installation

• npmBased on installation under windows :

npm i -g pnpm

• Use a separate script to install under windows:

iwr https://get.pnpm.io/install.ps1 -useb | iex
//默认安装路径：`C:\Users\【用户名】\AppData\Local\pnpm`
//如果想要指定安装目录，请提前设置环境变量：【PNPM_HOME】=[指定目录]

3. Configuration

pnpm sets up configurations in the same way as npm. And npmthe configuration that is directly inherited, for example,

npm config list

pnpm config list
pnpm config get <key>
pnpm config set <key>
pnpm config delete <key>

As you can see, listthe print results of the two commands are exactly the same.

pnpm config list
pnpm config get <key>
pnpm config set <key>
pnpm config delete <key>

4. Filtering

Match: filter

Filtering allows you to limit commands to a specific subset of packages. Selectors can be specified via the --filter(or ) flag:-F

pnpm -F <package_name> start
pnpm --filter <package_name> start

The above command will enter project1the project and execute pnpm run startthe command.

exclude:!

Any filter selector can be used as an exclusion by adding a "!" at the beginning.

For example, this will foorun a command in all projects except :

pnpm --filter=!foo <cmd>

5. pnpm:devPreinstallScript

pnpm:devPreinstallis a special lifecycle script that is pnpm installrun when a command is executed. This script is usually used to perform some custom operations before installing dependencies, such as a build or configuration process.

Open package.jsonthe file and add the following code in scriptsthe section:

{
    
    
  "scripts": {
    
    
    "pnpm:devPreinstall": "your-command-here"
  }
}

6. Management dependence

1. Installation: pnpm add

pnpm add <pkg>	//保存到 dependencies
pnpm add <pkg> -D	//保存到 devDependencies
pnpm add <pkg> -O	//保存到 optionalDependencies
pnpm add <pkg> -g	//安装到全局
pnpm add <pkg>@next	//从 next 标签下安装
pnpm add <pkg>@latest	//从 latest 标签下安装
pnpm add <pkg>@3.0.0	//安装指定版本 3.0.0

//从本地安装
pnpm add ./package.tar.gz
pnpm add ./some-directory

//从远端安装 Tar 包
pnpm add https://github.com/indexzero/forever/tarball/v0.5.6

//从 git 安装
pnpm add <git remote url>

Configuration item description:

• --save-prod, -P
  Install the specified package as regular dependencies.

• --save-dev, -D
  Install the specified packages as devDependencies.

• --save-optional, -O
  Install the specified packages as optionalDependencies.

• --save-exact, -E
  Saved dependencies will be specified as an exact version, rather than using pnpm's default semver range operator configuration.

• --save-peer
  Using --save-peer will add one or more peerDependenciespackages and install them to dev dependencies.

• --ignore-workspace-root-check
  Use --ignore-workspace-root-checkor -wto add dependencies to the workspace root directory. For example, pnpm add debug -w.

• --global, -g
  Install global dependencies

• --workspace
  Only add dependencies found in the workspace.

When installing some command line dependencies globally, binthe files corresponding to the command line pnpmwill be copied to PNPM_HOMEthe directory corresponding to the environment variable by default. For example pnpm add express express-generator -g, after executing:, the file corresponding to the express command line will appear in the root directory bin:

2. Installation: pnpm install
is equivalent pnpm ito installing all dependencies of the project.

3. Update: pnpm update
alias: up, upgrade. Updates the latest version of a package based on the specified scope. All dependencies are updated by default.

Command	Meaning
pnpm up	package.jsonUpdate all dependencies according to the specified scope
pnpm up --latest	Updates all dependencies, this operation ignores package.jsonthe specified scope
pnpm up foo@2	Update footo the latest version on v2
pnpm up "@babel/*"	Update @babelall dependencies in scope

4. Delete: pnpm remove
aliases: rm, uninstall, delete related items un
from node_modulesand project .package.jsonpackages

5. Connection: pnpm link
alias: ln
Make the current local package accessible system-wide or elsewhere.

pnpm link <dir>
pnpm link --global
pnpm link --global <pkg>

6. Unlink: pnpm unlink
unlinks a system-wide package(relative to pnpm link).

7. Rebuild: pnpm rebuild
alias: rb
Rebuild one package.

8. Pruning: pnpm prune
removes unnecessary ones packages.

9. Modify the global package directory.
Execute the following command, and then all dependent packages will be saved in the specified directory.

pnpm config set store-dir D:\Node\Cache\pnpm\store

https://pnpm.io/zh/next/cli/store

7. View dependencies

1. Check: pnpm audit

Check installed packages for known security issues.

In fact, when using this command, the Taobao mirror (https://registry.npmmirror.com/) does not support checking, and the following error will be prompted:

When using npmthe official warehouse, it is possible, as shown below:

2. Printing dependencies: pnpm list

Alias:ls

This command will output all installed packageversions and their dependencies in a tree structure.

pnpm ls
pnpm ls -r	//递归打印工作区依赖
pnpm ls --depth=0 -r
pnpm ls -g --depth=0

3. Print expired dependencies:
The pnpm outdated command is quite practical and can check package.jsonthe current and latest versions of all dependent packages.
For example:

common1The above common2is a custom module in the workspace, so it cannot be detected, and the others are recorded.

4. Print the dependencies of the specified package: pnpm why
displays packageall dependencies on the specified package package.
For example, the following prints out all dependent packages in the workspace common2. umi-antdThey are projects and projects respectively web/common1.

8. Run the script

1. Run: pnpm run
If you have a watchscript configured in package.json , like this:

"scripts": {
    
    
    "watch": "webpack --watch",
    "watch1": "webpack --watch",
    "watch3": "webpack --watch",
}

Execute pnpm run watch.
You can also use regular expressions to match and execute multiple scripts. The following command will match all watchstarting commands.

pnpm run "/^watch:.*/"

2. Execution: pnpm exec
executes shell commands within the project scope.
For example, node_modules/.binthere is a maxscript file in the directory under the project directory. Direct execution max -vis invalid, but pnpm exec max -vthis command can be executed through.


pnpm exec [命令名]Similar tonpx [命令名]

3. Create a project: pnpm dlx/pnpm create.
Both commands can be used to create a project. For example, create a react project:

pnpm dlx create-react-app ./my-app
pnpm create create-react-app ./my-app

The above two commands have the same execution effect. They can both initialize a react project and dependency packages are installed by default.
Only pnpm dlxthe command supports some configuration items.

9. Manage Node versions

1. Configuration command

pnpm env <cmd>

//cmd：
//use：使用
//remove：删除
//list：打印全部

Here is an introduction to the configuration that needs to be done under window :

1. Clear the settings PATHunder [Environment Variables]node
2. Install system-independent scripts. pnpm installation tutorial on other platforms

   //window下打开powershell:
   iwr https://get.pnpm.io/install.ps1 -useb | iex

3. View available versionspnpm env ls --remote

4. Install the required version

   pnpm env use -g lts	//安装LTS 版本
   pnpm env use -g 16	//安装 v16：
   pnpm env use -g latest	//最新版本
   

5. Remove a specific version:pnpm env remove -g 14.0.0

pnpmGlobally installed packages are saved in the: C:\Users\【用户名】\AppData\Local\pnpmdirectory.

2. Practical drills

After installing the standalone script version pnpm.

1. Install stable version: executepnpm env use -g lts

2. Remove stable version:pnpm env rm -g lts

   

3. Check if removal is successful:node -v

   At this time, the node version cannot be detected, indicating that the deletion was successful.

I have installed and modified it before . npmAfter reinstalling the independent script, there is no change before and I continue to use it.cacheprefixpnpmnpm config

Like pnpm!

10. Cache directory

1 Overview

1. npm global installation

npm i -g lodash

After execution, lodashit is stored in npm config get prefixthe corresponding directory.

For example:

2. pnpm global installation

pnpm install -g lodash

After execution is completed, the package is stored in C:\Users\【用户名】\AppData\Local\pnpmthe directory :

2. Modify the pnpm cache address

• Modify storedirectory:

pnpm config set store-dir [目录]
pnpm store path #查看store目录

• Modify cachedirectory:
  cachecache is stored in by default C:\Users\【用户名】\AppData\Local\pnpm-cache. Add the environment variable [ XDG_CACHE_HOME=D:\Node\Cache\pnpm\cache], and the cache of dependencies installed later will be stored in this directory.
• Remove unreferenced packages from storage.

pnpm store prune

---

Recommended reading: pnpm official documentation