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 :

npx younup

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 :

npm login

Le prompt va vous demander plusieurs informations :

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

Init du package

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

npm init

Après quelques questions, un fichier package.json est créé.
Il contient les informations essentiels pour pouvoir publier votre projet.

Voici le package.json de notre projet carte de visite :

{
    "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"
    }
}

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 name que dans votre package.json.

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

npm publish

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

npm notice
npm 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

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é dans votre terminal :

Merci d'avoir lu cet article !
Il a été posté initialement sur le blog de @younup_it :
https://www.younup.fr/blog/comment-publier-son-premier-package-npm