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

npx younup

Benjamin

Benjamin, expert front Younup, aime le code smart, compréhensible et réutilisable. Malgré ses différentes tentatives de supprimer ES4 et Angular3 il a échoué, damn !

Ses technos de prédilection sont le Typescript, il adore transpiler en ES3 pour Internet Explorer, mais aussi le JavaScript. Hé oui, on peut tout faire avec (enfin aussi n’importe quoi…). Avouons-le, il a aussi un petit crush pour les PWA. Quand le web vient titiller le monde des apps natives et apporter une concurrence ultra positive !

Et si vous ne trouvez pas Benjamin derrière son écran se tirant les cheveux pour avoir oublié un CTRL+S, il devrait être sur un terrain, non loin du Saint Laurent, à travailler ses shoots…

Retours aux publications