tutoriel pratique pnpm

I. Aperçu

1. Plus petit.
Lors de l'utilisation de npm, les dépendances seront installées à plusieurs reprises à chaque fois qu'elles seront utilisées par différents projets. Lors de l'utilisation de pnpm, les dépendances sont stockées dans un stockage adressable par le contenu.

2. Plus rapide

1. Résolution des dépendances. Les dépendances qui ne se trouvent pas dans l'entrepôt sont identifiées et récupérées vers l'entrepôt.
2. Calcul de la structure des répertoires. node_modulesLa structure des répertoires est calculée en fonction des dépendances.
3. Lier les dépendances. Toutes les dépendances précédemment installées seront récupérées directement depuis le référentiel et liées à node_modules.

3. Aplatissement
Lorsque vous utilisez npm ou Yarn Classic pour installer des dépendances, tous les packages sont élevés dans le répertoire racine du répertoire du module. Cela conduit à un problème, le code source peut accéder directement aux dépendances et les modifier, plutôt qu'en tant que dépendances de projet en lecture seule.

Par défaut, pnpm utilise des liens symboliques pour ajouter les dépendances directes du projet à la racine du répertoire du module.

Vous pouvez voir que lorsqu'ils sont référencés cookiedans express, seuls les liens physiques sont stockés dans les dépendances et les vrais packages se trouvent dans le répertoire aplati de premier niveau.

2.Installation

• npmBasé sur une installation sous Windows :

npm i -g pnpm

• Utilisez un script séparé pour installer sous Windows :

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

3.Configuration

pnpm configure les configurations de la même manière que npm. Et npmla configuration directement héritée, par exemple,

npm config list

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

Comme vous pouvez le constater, listles résultats d'impression des deux commandes sont exactement les mêmes.

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

4. Filtrage

Correspondance : filtre

Le filtrage vous permet de limiter les commandes à un sous-ensemble spécifique de packages. Les sélecteurs peuvent être spécifiés via le drapeau --filter(ou ):-F

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

La commande ci-dessus entrera dans project1le projet et exécutera pnpm run startla commande.

exclure:!

N'importe quel sélecteur de filtre peut être utilisé comme exclusion en ajoutant un "!" au début.

Par exemple, cela exécutera fooune commande dans tous les projets sauf :

pnpm --filter=!foo <cmd>

5. pnpm:devPreinstallScénario

pnpm:devPreinstallest un script de cycle de vie spécial qui est pnpm installexécuté lorsqu'une commande est exécutée. Ce script est généralement utilisé pour effectuer certaines opérations personnalisées avant d'installer des dépendances, telles qu'un processus de build ou de configuration.

Ouvrez package.jsonle fichier et ajoutez le code suivant dans scriptsla section :

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

6. Dépendance de la direction

1. Installation : ajout de pnpm

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>

Description de l'élément de configuration :

• --save-prod, -P
  Installez le package spécifié comme d'habitude dependencies.

• --save-dev, -D
  Installez les packages spécifiés en tant que devDependencies.

• --save-optional, -O
  Installez les packages spécifiés en tant que optionalDependencies.

• --save-exact, -E
  Les dépendances enregistrées seront spécifiées sous forme de version exacte, plutôt que d'utiliser la configuration par défaut de l'opérateur de plage Semver de pnpm.

• --save-peer
  L'utilisation de --save-peer ajoutera un ou plusieurs peerDependenciespackages et les installera dans dev dependencies.

• --ignore-workspace-root-check
  Utilisez --ignore-workspace-root-checkou -wpour ajouter des dépendances au répertoire racine de l'espace de travail. Par exemple, pnpm add debug -w.

• --global, -g
  Installer les dépendances globales

• --workspace
  Ajoutez uniquement les dépendances trouvées dans l'espace de travail.

Lors de l'installation globale de certaines dépendances de ligne de commande, binles fichiers correspondant à la ligne de commande pnpmseront copiés PNPM_HOMEpar défaut dans le répertoire correspondant à la variable d'environnement. Par exemple pnpm add express express-generator -g, après avoir exécuté :, le fichier correspondant à la ligne de commande express apparaîtra dans le répertoire racine bin:

2. Installation : pnpm install
équivaut pnpm ià installer toutes les dépendances du projet.

3. Mise à jour : alias de mise à jour pnpmup : , upgrade. Met à jour la dernière version d’un package en fonction de la portée spécifiée. Toutes les dépendances sont mises à jour par défaut.

Commande	Signification
pnpm up	package.jsonMettre à jour toutes les dépendances en fonction de la portée spécifiée
pnpm up --latest	Met à jour toutes les dépendances, cette opération ignore package.jsonla portée spécifiée
pnpm up foo@2	Mise à jour foovers la dernière version sur la v2
pnpm up "@babel/*"	Mettre à jour @babeltoutes les dépendances concernées

4. Supprimer : pnpm supprime
les alias :rm ,uninstall , supprime les éléments associés un
du node_modulesprojet .package.jsonpackages

5. Connexion : alias de lien pnpm
: ln
Rendre le package local actuel accessible dans tout le système ou ailleurs.

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

6. Dissocier : pnpm unlink dissocie
un système à l'échelle du système package(par rapport à pnpm link).

7. Reconstruire :
 alias de reconstruction pnpm : rb
Reconstruire un package.

8. Taille : pnpm prune
supprime les éléments inutiles packages.

9. Modifiez le répertoire global des packages.
Exécutez la commande suivante, puis tous les packages dépendants seront enregistrés dans le répertoire spécifié.

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

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

7. Afficher les dépendances

1. Vérifier : audit pnpm

Vérifiez les packages installés pour les problèmes de sécurité connus.

En fait, lors de l'utilisation de cette commande, le miroir Taobao (https://registry.npmmirror.com/) ne prend pas en charge la vérification et l'erreur suivante s'affichera :

Lors de l'utilisation npmde l'entrepôt officiel, il est possible, comme indiqué ci-dessous :

2. Impression des dépendances : liste pnpm

Alias:ls

Cette commande affichera toutes packageles versions installées et leurs dépendances dans une arborescence.

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

3. Imprimer les dépendances expirées :
La commande pnpm outdated est assez pratique et permet de vérifier package.jsonles versions actuelles et les dernières de tous les packages dépendants.
Par exemple:

common1Ce qui précède common2est un module personnalisé dans l'espace de travail, il ne peut donc pas être détecté et les autres sont enregistrés.

4. Imprimez les dépendances du package spécifié : pnpm Why
affiche packagetoutes les dépendances sur le package spécifié package.
Par exemple, ce qui suit imprime tous les packages dépendants dans l'espace de travail common2. Ce sont respectivement umi-antddes projets et des projets web/common1.

8. Exécutez le script

1. Exécutez : pnpm run
Si vous avez un watchscript configuré dans package.json , comme ceci :

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

Exécuter pnpm run watch.
Vous pouvez également utiliser des expressions régulières pour faire correspondre et exécuter plusieurs scripts. La commande suivante correspondra à toutes watchles commandes de démarrage.

pnpm run "/^watch:.*/"

2. Exécution : pnpm exec
exécute les commandes shell dans le cadre du projet.
Par exemple, node_modules/.binil existe un maxfichier de script dans le répertoire sous le répertoire du projet. L'exécution directe max -vn'est pas valide, mais pnpm exec max -vcette commande peut être exécutée via.


pnpm exec [命令名]Semblable ànpx [命令名]

3. Créez un projet : pnpm dlx/pnpm create.
Les deux commandes peuvent être utilisées pour créer un projet. Par exemple, créez un projet React :

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

Les deux commandes ci-dessus ont le même effet d'exécution. Elles peuvent toutes deux initialiser un projet React et les packages de dépendances sont installés par défaut.
Seule pnpm dlxla commande prend en charge certains éléments de configuration.

9. Gérer les versions de nœud

1. Commande de configuration

pnpm env <cmd>

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

Voici une introduction à la configuration à effectuer sous window :

1. Effacez les paramètres PATHsous [Variables d'environnement]node
2. Installez des scripts indépendants du système. tutoriel d'installation de pnpm sur d'autres plateformes

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

3. Afficher les versions disponiblespnpm env ls --remote

4. Installez la version requise

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

5. Supprimez une version spécifique :pnpm env remove -g 14.0.0

pnpmLes packages installés globalement sont enregistrés dans le C:\Users\【用户名】\AppData\Local\pnpmrépertoire : .

2. Exercices pratiques

Après avoir installé la version du script autonome pnpm.

1. Installer la version stable : exécuterpnpm env use -g lts

2. Supprimer la version stable :pnpm env rm -g lts

   

3. Vérifiez si la suppression a réussi :node -v

   Pour le moment, la version du nœud ne peut pas être détectée, ce qui indique que la suppression a réussi.

Je l'ai déjà installé et modifié . npmAprès avoir réinstallé le script indépendant, il n'y a aucun changement avant et je continue de l'utiliser.cacheprefixpnpmnpm config

Comme pnpm !

10. Répertoire cache

1. Vue d'ensemble

1. installation globale de npm

npm i -g lodash

Après exécution, lodashil est stocké dans npm config get prefixle répertoire correspondant.

Par exemple:

2. installation globale de pnpm

pnpm install -g lodash

Une fois l'exécution terminée, le package est stocké dans C:\Users\【用户名】\AppData\Local\pnpmle répertoire :

2. Modifiez l'adresse du cache pnpm

• Modifier storele répertoire :

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

• Modifier cachele répertoire :
  cachele cache est stocké par défaut dans C:\Users\【用户名】\AppData\Local\pnpm-cache. Ajoutez la variable d'environnement [ XDG_CACHE_HOME=D:\Node\Cache\pnpm\cache], et le cache des dépendances installées ultérieurement sera stocké dans ce répertoire.
• Supprimez les packages non référencés du stockage.

pnpm store prune

---

Lecture recommandée : documentation officielle de pnpm