Npx, c'est quoi ?

Npx est un outil développé par npm qui facilite l'exécution de packages Node.js.

Il est livré avec npm à partir de la version 5.2.

Avant l'arrivée de npx, il était nécessaire d'installer des packages en tant que dépendance pour pouvoir les utiliser dans un projet.

Grâce à lui, il est maintenant possible d'exécuter des packages sans devoir les installer de manière permanente.

Comment fonctionne npx ?

Lorsque vous utilisez npx pour exécuter un package, celui-ci vérifie d'abord s'il existe déjà dans votre projet ou s'il est installé globalement :

• S'il existe, il l'exécute.
• S'il n'existe pas, npx l'installe temporairement et l'exécute.

Cela permet de tester des packages sans devoir les installer dans votre projet.

Pour utiliser npx, il suffit de taper la commande npx suivie du nom du package que vous souhaitez exécuter.

Par exemple :

npx mon-super-package

Npx vs npm

Npm est un gestionnaire de packages qui vous aide à installer vos dépendances en lisant votre fichier package.json (à l'instar de yarn et pnpm) à l'aide des commandes :

npm install

ou

npm i

Il permet également d'exécuter des commandes déjà définies dans votre projet.

A la différence de npx, vous pouvez également lancer des commandes de package mais uniquement issues des packages déjà installés.

Et dlx ?

A l'instar de npx, dlx vous permet d'exécuter des packages sans les installer.

Utilsable avec pnpm ou yarn, c'est l'équivalent de npx avec ces packages manager.

Cependant, dlx n'utilisera jamais vos packages locaux pour l'exécution de commande.

Conclusion

Avant la version 5.2. de npm, on devait installer nos packages pour les utiliser.

Aujourd'hui, c'est beaucoup plus simple et ça permet de tester des packages avant de les installer.
On peut également utiliser npx ou dlx pour lancer des scaffolding d'application :

// init d'un projet nuxt
pnpm dlx nuxi init <project-name>

// init d'un projet react
npx create-react-app my-app

Merci d'avoir lu cet article !
Il a été posté initialement sur mon site : https://necraidan.com/blog/npm-npx-dlx

Cover par Jiawei Zhao sur Unsplash