Comment publier son premier package npm
Tags: npm, package, node, javascript
Published: 2020-11-11 10:30:31

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 :
```bash
npx younup
```

Le code source du projet est disponible sur notre [github](https://github.com/Younup/card)

Au passage, on parle de la commande **npx** dans [notre blog](https://www.younup.fr/blog/npx-ou-comment-comprendre-que-ce-n-est-pas-une-faute-d-orthographe-de-npm)

## Compte et connexion
La première étape est de créer un compte **npm** (pour cela rendez-vous [ici](https://www.npmjs.com/signup)).

Ensuite, vous devez vous connecter à votre compte en ligne de commande :
```bash
npm login
```

Le prompt va vous demander plusieurs informations :
```bash
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.

```bash
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` :

```json
{
    "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 :
```bash
npm publish
```

La console affichera votre déploiement en temps réel :
```bash
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**](https://www.npmjs.com/package/younup)

### 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 :

![younup card](https://dev-to-uploads.s3.amazonaws.com/i/6hs1mcpqeg6fjitwee6i.png)

______

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