Comment publier son premier package npm

‍

Dans cet article nous allons vous montrer comment nous pouvons simplement publier un package npm.

Pour cela, nous allons utiliser un projet support, notre carte de visite Younup !

Le projet

L'idée du projet est de pouvoir afficher une carte de visite dans un terminal en exécutant notre package avec la commande suivante :

<pre><code>npx younup<code><pre>

Le code source du projet est disponible sur notre github.

Au passage, on parle de la commande npx dans notre blog.

Compte et connexion

La première étape est de créer un compte npm (pour cela rendez-vous ici).

Ensuite, vous devez vous connecter à votre compte en ligne de commande :

<pre><code> npm login <code><pre>

Le prompt va vous demander plusieurs informations :

<pre><code>npm login
Username: younup
Password:
Email: (this IS public) helloyou@younup.fr
Logged in as younup on https://registry.npmjs.org/.<code><pre>

Init du package

Si vous démarrez de 0, il faudra init votre package.

<pre><code>npm init<code><pre>

Après quelques questions, un fichier <span class="css-span">package.json</span> est créé. Il contient les informations essentielles pour pouvoir publier votre projet.

Voici le <span class="css-span">package.json</span> de notre projet <span class="css-span">carte de visite</span> :

<pre><code>{
 "name": "younup",
 "version": "1.0.0",
 "description": "The Younup Card",
 "main": "./bin/card.js",
 "bin": {
   "younup": "./bin/card.js"
 },
 "scripts": {
   "start": "node ./bin/card.js"
 },
 "repository": {
   "type": "git",
   "url": "git+https://github.com/Younup/card.git"
 },
 "keywords": ["younup", "npx", "card", "npx card"],
 "author": "Benjamin Auzanneau <b.auzanneau@younup.fr>",
 "license": "MIT",
 "dependencies": {
   "boxen": "^4.2.0",
   "chalk": "^3.0.0"
 }
}<code><pre>

Publication

Le seul point noir que vous allez peut-être rencontrer en publiant, c'est la collision de nom. Vous ne pouvez pas avoir un projet publié sur npm qui possède le même <span class="css-span">name</span> que dans votre <span class="css-span">package.json</span>.

Pour pouvoir publiez votre projet, il suffit de taper la commande suivante :

<pre><code>npm publish<code><pre>

La console affichera votre déploiement en temps réel :

<pre><code>npm noticen
pm notice package: younup@1.0.0
npm notice === Tarball Contents ===
npm notice 623B  package.json
npm notice 98B   .prettierrc
npm notice 1.1kB LICENSE
npm notice 115B  README.md
npm notice 1.2kB ascii/logo.js
npm notice 2.4kB bin/card.js
npm notice === Tarball Details ===
npm notice name:          younup
npm notice version:       1.0.0
npm notice package size:  2.7 kB
npm notice unpacked size: 7.4 kB
npm notice shasum:        2631976b0f4b3fe836ef945213d6d7c95c6ab7af
npm notice integrity:     sha512-ObT18M8pTkBz4[...]vuSXDf1lRcVbA==
npm notice total files:   6
npm notice
+younup@1.0.0<code><pre>

Le projet est maintenant accessible au téléchargement sur le registry de npm.

La carte de visite Younup

Maintenant que notre projet est accessible à tous, il est possible de l'exécuter ou de l'installer dans votre projet en tant que dépendance.

En ce qui concerne la carte de visite, elle n'existe que pour être exécutée dans votre terminal :

<pre><code>npx younup<code><pre>

‍

‍

‍