Bonnes pratiques pour créer un package npm moderne en pensant à la sécurité

La technologie évolue sans cesse, et vos processus et pratiques doivent suivre ces changements. Ainsi, même si npm a 15 ans (en 2025), vos pratiques de création de packages npm devraient si possible être bien plus modernes. Si vous pensez qu’elles sont peut-être un peu dépassées, poursuivez votre lecture.

Dans ce tutoriel, nous allons vous guider pas à pas dans la création d’un package npm en suivant les bonnes pratiques modernes (en 2025). Vous apprendrez d’abord à créer un package npm afin de vous familiariser avec sa création et sa publication dans le registre npm. Vous découvrirez ensuite comment rendre votre package npm plus robuste et prêt pour la production en mettant en place un framework de test, un pipeline d’intégration et de déploiement continus, des contrôles de sécurité et la gestion automatisée des versions sémantiques pour les mises en production. À la fin de ce tutoriel, vous serez prêt à créer des packages npm modernes et pérennes. C’est parti !

Prérequis

1. Connaissances de base de Node.js, JavaScript/TypeScript, GitHub et GitHub Actions

2. Outils de développement disponibles pour vous aider à créer un package npm

Exemple simple de package npm

Commençons par nous familiariser avec le processus de création et de publication d’un package npm à l’aide d’un exemple simple. Si vous connaissez déjà ce processus, vous pouvez passer à la section Package npm prêt pour la production, qui aborde des sujets plus avancés.

Configurer votre projet

Pour commencer, vous avez besoin d’un projet sur GitHub. Suivez donc ces étapes pour en créer un. Si vous en avez déjà un, vous pouvez passer à la section suivante, mais pensez à vérifier à nouveau l’étape 5 de cette section, qui concerne le nom de votre package.

• Créez un dépôt GitHub : https://github.com/new

• Clonez le dépôt en local.
  Exemple : git clone https://github.com/snyk-snippets/simple-npm-package.git

• Ouvrez votre terminal et accédez au dossier de votre projet cloné.
  Exemple : cd simple-npm-package

• Exécutez npm init -y pour créer un fichier package.json. Remarque : si vous avez cloné le dépôt d’exemple, cette étape est inutile.

• Remplacez la valeur de la propriété name dans package.jsonpar un nom avec portée.
  Exemple : @clarkio/simple-npm-package. Utilisez votre nom d’utilisateur ou celui de votre organisation à la place de @clarkio.

• Écrivez le code de votre package (ou utilisez simplement l’exemple « Hello World » dans index.js).

Une fois votre projet créé, vous pouvez passer à la création d’un compte npm.

Créer un compte npm

Pour mettre votre package npm à la disposition d’autres utilisateurs, vous devez disposer d’un compte npm. Les étapes suivantes vous guideront dans la création de votre compte (si vous n’en avez pas déjà un), l’activation de l’authentification à deux facteurs (2FA) pour renforcer sa sécurité et la connexion de votre compte à votre machine locale.

1. Inscrivez-vous sur npm à l’adresse https://www.npmjs.com/signup.

2. Pour renforcer la sécurité, activez la 2FA sur votre compte npm : https://docs.npmjs.com/configuring-two-factor-authentication.

3. Dans votre terminal, connectez-vous à votre compte npm à l’aide de la commande npm login, puis suivez les instructions à l’écran. Par exemple :

1> npm login
2npm notice Log in on https://registry.npmjs.org/
3Username: clarkio
4Password:
5Email: (this IS public) <email address>
6npm notice Please use the one-time password (OTP) from your authenticator application
7Enter one-time password from our authenticator app: <OTP>
8Logged in as clarkio on https://registry.npmjs.org/.

Comment publier votre package npm

Une fois votre projet npm et votre compte npm prêts, vous pouvez publier votre package npm dans le registre npmjs public et officiel afin que d’autres utilisateurs puissent l’utiliser. Voici les étapes à suivre pour vérifier ce qui sera publié avant de lancer la publication proprement dite :

1. Dans votre terminal, exécutez npx pack --dry-run pour afficher le contenu qui sera inclus dans la version publiée du package.

1> npx pack --dry-run
2npm notice Tarball Contents
3npm notice 1.1kB LICENSE
4npm notice 1.9kB README.md
5npm notice 108B index.js
6npm notice 700B package.json
7npm notice Tarball Details

Vous vous assurez ainsi de ne manquer aucun fichier de code source nécessaire au bon fonctionnement de votre package. Il est également recommandé de vérifier que vous ne divulguez pas accidentellement d’informations sensibles au public, comme un fichier de configuration local contenant des identifiants de base de données ou des clés d’API.

2. Dans votre terminal, exécutez npm publish --dry-run pour voir ce qui se passerait si vous lanciez la commande.

1> npm publish --dry-run
2npm notice
3npm notice 📦@clarkio/simple-npm-package@0.0.1
4npm notice === Tarball Contents ===
5npm notice 1.1kB LICENSE
6npm notice 1.2kB README.md
7npm notice 95B index.js
8npm notice 690B package.json
9npm notice === Tarball Details===
10npm notice name: @clarkio/simple-npm-package
11npm notice version: 0.0.1
12npm notice filename:@clarkio/simple-npm-package-0.0.1.tgz
13npm notice package size:1.7 kB
14npm notice unpacked size: 3.1 kB
15npm notice shasum:40ede3ed630fa8857c0c9b8d4c81664374aa811c
16npm notice integrity:sha512-QZCyWZTspkcUXL... ]L60ZKBOOBRLTg==
17npm notice total files:4
18npm notice
19+ @clarkio/simple-npm-package@0.0.1

3. Dans votre terminal, exécutez npm publish --access=public pour publier réellement le package sur npm. Remarque : --access=public est nécessaire pour les packages avec portée (@clarkio/modern-npm-package), car ils sont privés par défaut. Les packages sans portée seront également publics si le champ private de leur package.json n’est pas défini sur true.

1> npm publish --access=public
2npm notice
3npm notice 📦@clarkio/simple-npm-package@0.0.1
4npm notice === Tarball Contents ===
5npm notice 1.1kB LICENSE
6npm notice 1.2kB README.md
7npm notice 95B index.js
8npm notice 690B package.json
9npm notice === Tarball Details===
10npm notice name: @clarkio/simple-npm-package
11npm notice version: 0.0.1
12npm notice filename:@clarkio/simple-npm-package-0.0.1.tgz
13npm notice package size:2.1 kB
14npm notice unpacked size: 4.1 kB
15npm notice shasum:6f335d6254ebb77a5a24ee729650052a69994594
16npm notice integrity:sha512-VZ1K1eMFOKeJW[...]7ZjKFVAxLcpdQ==
17npm notice total files:4
18npm notice
19This operation requires a one-time password.
20Enter OTP: <OTP>
21+ @clarkio/simple-npm-package@0.0.1

Et voilà ! Vous avez créé et déployé votre propre package npm. Vous allez maintenant découvrir comment créer un package plus robuste, prêt pour les environnements de production et une utilisation à plus grande échelle.

Package npm prêt pour la production

Même si l’exemple de package précédent pourrait être utilisé en production, sa maintenance nécessite un travail manuel continu. L’utilisation d’outils et de l’automatisation, ainsi que de tests et de contrôles de sécurité adaptés, vous aidera à réduire au minimum les efforts nécessaires pour assurer le bon fonctionnement du package. Voyons cela de plus près.

Les sections suivantes abordent les points suivants :

1. Configurer votre projet modern-npm-package

2. Compiler au format de module ECMAScript (ESM)

3. Configurer et écrire des tests unitaires

4. Mettre en place des contrôles de sécurité

5. Automatiser la gestion des versions et la publication

Si vous n’avez pas de projet à utiliser en suivant cet article, vous pouvez vous appuyer sur le projet d’exemple suivant : https://github.com/snyk-snippets/modern-npm-package.

Compiler au format de module ECMAScript

Le format de module ECMAScript est pris en charge nativement par Node.js depuis la version 12+, et la dernière version bénéficiant d’un support à long terme est la 22.x. Par ailleurs, l’écosystème des environnements d’exécution JavaScript est plus concurrentiel, avec notamment Bun.js et Deno. Tous facilitent aujourd’hui l’adoption du format ESM. Nous allons utiliser TypeScript pour préparer votre package npm à utiliser le format ESM.

• Commencez par créer un fichier de configuration TypeScript nommé tsconfig.json. Il définit les paramètres de compilation à utiliser pour générer votre package au format ESM. Vous pouvez l’adapter à votre projet selon vos besoins. En particulier, modifiez la propriété files pour qu’elle corresponde à la structure de votre projet si vous n’utilisez pas l’exemple fourni.

1{
2    "compilerOptions": {
3      "lib": ["ES2024", "DOM"],
4      "target": "ES2024",
5      "module": "NodeNext",
6      "moduleResolution": "NodeNext",
7      "outDir": "./lib/",
8      "declarationDir": "./lib/types",
9      "strict": true,
10      "esModuleInterop": true,
11      "forceConsistentCasingInFileNames": true,
12      "skipLibCheck": true,
13      "checkJs": true,
14      "allowJs": true,
15      "declaration": true,
16      "declarationMap": true,
17      "allowSyntheticDefaultImports": true
18    },
19    "files": ["./src/index.ts"]
20  }

• La propriété lib indique à TypeScript les types auxquels se référer pour vous aider à écrire le code de votre projet.

• La propriété target indique à TypeScript la version de JavaScript vers laquelle compiler le code de votre projet.

• La propriété module indique à TypeScript le format de module JavaScript à utiliser pour compiler le code de votre projet.

• La propriété moduleResolution aide TypeScript à déterminer comment résoudre une instruction « import ».

• Les propriétés outDir et declarationDir indiquent à TypeScript où placer les fichiers générés par la compilation de votre code et les définitions des types utilisés.

2. Ajoutez à votre fichier package.json un champ files qui pointe vers votre dossier lib, où se trouvent les fichiers générés par TypeScript lors de la compilation du package.

3. Modifiez les champs main et types de votre fichier package.json pour qu’ils pointent vers les fichiers de sortie du package compilé. Ils serviront d’options par défaut et de secours.

1"types": "./lib/index.d.ts",
2  "main": "./lib/index.js",

4. Ajoutez un champ files à votre fichier package.json pour indiquer quels fichiers npm doit inclure dans le package à publier.

1"files": [
2   "lib/**/*"
3],

5. Créez des commandes dans le champ scripts de package.json pour utiliser tsc et compiler le package. Les fichiers sources seront ainsi générés dans le dossier lib.

1    "clean": "del-cli ./lib",
2    "build": "npm run clean && tsc -p ./tsconfig.json",
3    "prepack": "npm run build",

• Le script clean supprime les fichiers générés lors des compilations précédentes afin de repartir de zéro.

• Le script build supprime les anciens fichiers générés, puis utilise le compilateur TypeScript pour compiler le package dans le répertoire de sortie.

• Le script prepack est utilisé par npm avant la création du package, en préparation de sa publication dans un registre.

6. Installez maintenant les dépendances de développement nécessaires. Exécutez npm install -D typescript del-cli

7. Exécutez npm run build dans votre terminal pour que TypeScript compile votre projet en vue de son utilisation et de sa publication.

Voilà tout ce dont vous avez besoin pour configurer TypeScript afin de compiler votre package npm, compatible avec les formats de module CommonJS et ECMAScript. Vous allez maintenant découvrir comment configurer et exécuter des tests sur le code de votre package npm afin de vérifier qu’il produit les résultats attendus.

Configurer et ajouter des tests

Pour avoir confiance dans le comportement de votre code et les résultats qu’il produit, vous devez mettre en place un processus de test. Les tests vous obligent à envisager différentes façons d’utiliser votre code, au-delà du scénario idéal auquel on pense généralement lors de sa création. Par exemple, vous pouvez chercher comment faire échouer une fonction pour qu’elle génère une erreur ou produise un résultat inattendu. Votre application gagnera ainsi en résilience et en pérennité, et vous pourrez également vérifier que l’ajout de nouvelles fonctionnalités ne provoque aucune régression.

Pour approfondir les tests et découvrir les bonnes pratiques en la matière, consultez le dépôt JavaScript Best Practices de Yoni Goldberg.

Tests unitaires

Pour vérifier que votre package se comporte comme prévu, vous devez écrire des tests pour votre code. Quelques outils vous aideront à configurer votre projet pour exécuter les tests unitaires et en afficher les résultats. Ces outils sont désormais intégrés à Node.js sous forme de modules (depuis les versions 20.x et 18.x, et la version 16.17.x derrière un indicateur expérimental). Suivez les étapes ci-dessous pour configurer et exécuter les tests de votre package npm :

1. Installez les dépendances de développement en exécutant la commande suivante dans votre terminal : npm i -D @types/node

2. Créez un dossier tests à la racine de votre projet.

3. Créez un fichier index.test.ts dans le dossier tests.

4. Écrivez des tests unitaires dans le fichier index.test.ts pour tester le code de index.ts

Remarque : vous pouvez vous inspirer du dépôt d’exemple de package npm : https://github.com/snyk-snippets/modern-npm-package.

5. Dans la section scripts de votre fichier package.json, ajoutez une propriété tests et attribuez-lui la valeur node --experimental-strip-types --test

1  "scripts": {
2     "clean": "del-cli ./lib",
3    "build": "npm run clean && tsc -p ./tsconfig.json",
4    "prepack": "npm run build",
5    "test": "node --experimental-strip-types --test",
6
7  },

6. À la racine de votre projet, exécutez npm test dans votre terminal pour lancer les tests et afficher les résultats :

1> @snyk-labs/modern-npm-package@0.0.0-development test
2> node --experimental-strip-types --test
3
4(node:83429) ExperimentalWarning: Type Stripping is an experimental feature and might change at any time
5(Use `node --trace-warnings ...` to show where the warning was created)
6(node:83430) ExperimentalWarning: Type Stripping is an experimental feature and might change at any time
7(Use `node --trace-warnings ...` to show where the warning was created)
8▶ NPM Package
9  ✔ should be an object (0.754083ms)
10  ✔ should have a helloWorld property (0.518958ms)
11✔ NPM Package (1.754875ms)
12▶ Hello World Function
13  ✔ should be a function (0.136667ms)
14  ✔ should return the hello world message (0.063791ms)
15✔ Hello World Function (0.270417ms)
16▶ Goodbye Function
17  ✔ should be a function (0.13275ms)
18  ✔ should return the goodbye message (0.159541ms)
19✔ Goodbye Function (0.552542ms)
20ℹ tests 6
21ℹ suites 3
22ℹ pass 6
23ℹ fail 0
24ℹ cancelled 0
25ℹ skipped 0
26ℹ todo 0
27ℹ duration_ms 113.692542

Exécuter les tests dans un pipeline

Maintenant que vous disposez de tests pour valider le comportement de votre code, vous pouvez les intégrer à un pipeline. Vous vous assurerez ainsi qu’aucune modification apportée à votre dépôt ne perturbe le fonctionnement du code. Suivez les étapes ci-dessous pour créer un workflow de test dans le pipeline de votre projet.

1. Créez une nouvelle GitHub Action pour votre dépôt : https://github.com/<your-account-or-organization>/<your-repo-name>/actions/new

2. Renommez le workflow tests.yml

3. Insérez le script Snyk GitHub Action suivant dans votre fichier de workflow :

1name: Tests
2
3on:
4  push:
5    branches: [ main ]
6  pull_request:
7    branches: [ main ]
8
9jobs:
10  build:
11
12    runs-on: ubuntu-latest
13
14    strategy:
15      matrix:
16        node-version: [22.x]
17
18    steps:
19      - uses: actions/checkout@v4
20      - name: Use Node.js ${{ matrix.node-version }}
21        uses: actions/setup-node@v4
22        with:
23          node-version: ${{ matrix.node-version }}
24      - run: npm ci
25      - run: npm test

Ce script YAML récupère la dernière version de votre code, installe ses dépendances et exécute la commande npm test pour lancer vos tests. Il le fait pour chaque version de Node.js répertoriée dans le champ node-version, afin de vérifier que le code fonctionne comme prévu dans chaque environnement d’exécution.

Vous avez maintenant terminé la configuration de votre projet pour exécuter des tests sur le code de votre package npm et en évaluer les résultats. Vous vous demandez peut-être : « Comment tester en utilisant mon package npm dans un autre projet ? » Voyons comment procéder.

Tester le package

Avoir confiance dans le code de votre package npm grâce aux tests unitaires, c’est une chose. S’assurer que l’expérience d’utilisation du package npm dans son ensemble est satisfaisante, c’en est une autre. Pour cela, vous devez ajouter votre package npm comme dépendance à un autre projet et vérifier que son utilisation s’y déroule comme prévu. Voici cinq façons de le tester :

1. Installer à partir de la sortie de npm pack

2. Installer via un chemin relatif

3. Installer avec npm link

4. Installer depuis un registre (comme le registre public npm sur npmjs.com)

5. Utiliser Verdaccio (un projet de registre npm privé open source) pour exécuter les étapes de publication et d’installation du package de bout en bout dans le cadre de votre CI

npm pack

Cette méthode utilise la commande npm pack pour empaqueter votre package npm et le compresser dans un seul fichier (<package-name>.tgz). Vous pouvez ensuite accéder au projet dans lequel vous souhaitez utiliser le package et l’installer à partir de ce fichier. Voici les étapes à suivre :

1. Dans le répertoire de votre package npm, exécutez npm pack dans votre terminal. Notez le fichier .tgz généré et son emplacement.

2. Accédez au répertoire du projet dans lequel vous souhaitez utiliser le package npm. Exemple : cd /path/to/project

3. Depuis le répertoire du projet client, exécutez npm install /path/to/package.tgz en remplaçant le chemin par l’emplacement du fichier .tgz obtenu à l’étape 1.

4. Vous pouvez ensuite commencer à utiliser le package dans ce projet client pour le tester.

Cette méthode vous offre une expérience d’utilisation de votre package npm au plus proche de la production.

npm link

Cette méthode utilise la commande npm link pour pointer vers le répertoire de votre package lorsque vous essayez de l’installer dans des projets client. Voici les étapes à suivre :

1. Dans le répertoire de votre package npm, exécutez npm link dans votre terminal.

2. Accédez au répertoire du projet dans lequel vous souhaitez utiliser le package npm. Exemple : cd /path/to/project

3. Depuis le répertoire du projet client, exécutez npm link <name-of-your-package>.

Votre projet client pointera ainsi vers le répertoire du package npm lorsque vous ferez référence au package dans votre code. Cette méthode ne vous offre pas une expérience d’utilisation du package pleinement comparable à la production, mais elle vous permet de vérifier que ses fonctionnalités fonctionnent comme prévu.

Chemin relatif

Cette méthode s’appuie sur votre connaissance de la commande npm install. Elle ressemble à npm link, sans qu’il soit nécessaire d’apprendre une nouvelle commande comme link.

1. Depuis le répertoire de votre projet client, exécutez npm install /path/to/your/package dans votre terminal.

Comme avec la méthode npm link, vous pouvez tester rapidement les fonctionnalités de votre package dans un projet client, mais vous n’obtiendrez pas une expérience pleinement comparable à la production. En effet, cette méthode pointe vers le répertoire contenant l’intégralité du code source du package, et non vers une version compilée du package, comme celle que vous trouveriez dans un registre npm.

Registre npm

Cette méthode utilise le registre public (ou votre propre registre) de packages npm. Elle consiste à publier votre package, puis à l’installer comme vous le feriez habituellement pour n’importe quel autre package npm.

1. Publiez votre package npm en suivant les étapes décrites plus haut dans cet article, à l’aide de la commande npm publish.

2. Accédez au répertoire du projet dans lequel vous souhaitez utiliser le package npm. Exemple : cd /path/to/project

3. Depuis le répertoire du projet client, exécutez npm install <name-of-your-package>.

Un grand merci à Mirco Kraenz (@MKraenz), qui a créé un fil Twitter résumant ce que nous avons appris lors d’un livestream !

Vous avez maintenant créé votre package pour prendre en charge les formats de modules modernes et vérifié son bon fonctionnement grâce à des tests unitaires et des tests de packaging. Vous devez maintenant vous assurer qu’il ne présente aucun problème de sécurité et éviter que de nouveaux problèmes n’apparaissent dans votre package npm.

Mettre en place des contrôles de sécurité

Tout comme vous ne voulez pas de failles de sécurité dans vos propres projets, vous ne voulez pas non plus en introduire dans ceux d’autres personnes. La création d’un package npm destiné à être utilisé dans de nombreux autres projets implique une responsabilité accrue : vous devez garantir sa sécurité. Vous devez mettre en place des contrôles de sécurité pour surveiller les failles, vous alerter et vous aider à les corriger. Un outil comme Snyk peut simplifier le travail nécessaire pour répondre à ces besoins.

Pour cet exemple de package npm, vous utilisez GitHub comme outil de gestion du code source. Vous allez donc tirer parti de GitHub Actions pour intégrer Snyk à votre workflow. Snyk propose un projet de référence GitHub Actions qui vous aidera à démarrer et fournit des exemples pour d’autres langages de programmation et outils que vous pourriez utiliser dans vos projets.

1. Snyk est gratuit : inscrivez-vous et obtenez votre jeton d’API Snyk.

2. Ajoutez votre jeton d’API Snyk comme secret de dépôt sur GitHub : https://github.com/<your-account-or-organization>/<your-repo-name>/settings/secrets/actions/new

3. Créez une nouvelle GitHub Action pour votre dépôt : https://github.com/<your-account-or-organization>/<your-repo-name>/actions/new

4. Renommez le workflow snyk.yml.

5. Insérez le script Snyk Action suivant dans votre fichier de workflow :

1name: Snyk Security Check
2on: [push,pull_request]
3jobs:
4  security:
5    runs-on: ubuntu-latest
6    steps:
7      - uses: actions/checkout@main
8      - name: Run Snyk to check for vulnerabilities
9        uses: snyk/actions/node@master
10        env:
11          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}

6. Validez vos modifications.

7. Vérifiez que l’Action s’est exécutée correctement : https://github.com/<your-account-or-organization>/<your-repo-name>/actions

Une fois cette configuration en place, chaque fois qu’une personne envoie des modifications vers votre dépôt ou ouvre une pull request, un contrôle de sécurité s’exécute pour vérifier qu’aucune faille n’est introduite dans le package. Si un problème est détecté, l’Action échoue et vous alerte en vous indiquant les détails de la faille. Vous allez maintenant automatiser la gestion des versions et la publication de votre package npm.

Vous souhaitez connaître les problèmes de sécurité avant que les modifications ne soient envoyées vers votre dépôt ? Installez le plugin Snyk pour l’outil de développement de votre choix. Vous préférez utiliser des outils CLI ? Ajoutez également Snyk CLI à votre chaîne d’outils. Ces outils vous aideront à détecter les problèmes de sécurité pendant le développement et à vous en avertir plus tôt dans votre workflow de projet.

À noter : cette configuration utilise uniquement le produit Snyk Open Source (SCA), et non Snyk Code (SAST). Snyk Code est notre produit de sécurité du code. Pour en profiter pleinement, vous devez d’abord l’activer gratuitement depuis votre compte Snyk, puis l’ajouter au script de votre workflow. Pour en savoir plus sur l’utilisation de Snyk Code dans votre pipeline, consultez cet article sur la création d’un pipeline sécurisé avec GitHub Actions (l’exemple utilise Java et Maven, mais vous pouvez les remplacer par Node.js et npm).

Automatiser la gestion des versions et la publication

Lorsque vous fusionnez des modifications dans votre branche principale, vous ne voulez pas avoir à mettre à jour manuellement la version du package npm et à le publier à chaque fois. Vous voudrez plutôt automatiser ce processus. Si vous vous souvenez de l’exemple simple de package npm présenté plus haut dans cet article, vous avez utilisé la commande suivante pour publier votre package npm :

1npm publish

Vous devez également respecter la norme du secteur en matière de gestion sémantique des versions, afin que les utilisateurs de votre package comprennent les implications des changements de version que vous publiez dans le registre.

Qu’est-ce que la gestion sémantique des versions ?

La gestion sémantique des versions prévoit un numéro de version composé de trois éléments : le premier correspond à la version majeure, le deuxième à la version mineure et le dernier à la version de correctif. Pour en savoir plus sur la gestion sémantique des versions, la gestion des versions et les fichiers de verrouillage, consultez Qu’est-ce que package-lock.json et comment fonctionne un fichier de verrouillage avec les packages Yarn et NPM ?

Et si vous pouviez éviter toutes ces opérations manuelles en configurant un workflow automatisé avec GitHub Actions qui se charge de publier votre package npm ? Vous avez de la chance : un outil appelé Semantic Release s’intègre à GitHub Actions. Pour automatiser ce processus, il vous suffit d’utiliser ce qu’on appelle des commits conventionnels lorsque vous validez des modifications dans votre projet. L’automatisation peut ainsi tout mettre à jour comme il se doit et préparer la prochaine version de votre projet.

Suivez les étapes ci-dessous pour configurer le tout avec votre package npm moderne.

1. Dans votre terminal, exécutez : npm i -D semantic-release

2. Dans votre terminal, exécutez : npx semantic-release-cli setup

3. Suivez les invites du terminal et fournissez les jetons nécessaires :

• Vous aurez besoin d’un jeton d’accès personnel GitHub. Pour en créer un, accédez à https://github.com/settings/tokens/new?scopes=public_repo

• Lors de la création de ce jeton, utilisez les portées suivantes :

• Cliquez sur le bouton « Generate token », puis copiez et enregistrez la valeur affichée sur la page.

• Vous aurez également besoin d’un jeton d’accès npm de type Automation, réservé aux environnements CI afin de contourner l’authentification à deux facteurs de votre compte. Pour en créer un, accédez à https://www.npmjs.com/settings/<your-npm-account>/tokens. Veillez à sélectionner le type « Automation », car ce jeton sera utilisé dans un workflow CI/CD.

1bc@mbp-snyk modern-npm-package % npx semantic-release-cli setup
2? What is your npm registry? https://registry.npmjs.org/
3? What is vour nom username? clarkio
4? What is your pm password? [hidden]
5? What is your NPM two-factor authentication code? <2FA code>
6Provide a GitHub Personal Access Token (create a token at https://github.com/settings/tokens/new?scopes=repo
7<token>
8? What CI are you using? Github Actions
9bc@mbp-snyk modern-npm-package %

4. Ajoutez votre jeton npm à votre dépôt GitHub en tant que secret de dépôt ici : https://github.com/<your-name-or-organization>/<your-repository>/settings/secrets/actions/new. Nommez le secret NPM_TOKEN et attribuez-lui la valeur récupérée à l’étape précédente.

5. Dans votre projet, accédez au fichier package.json et ajoutez une clé releases comme ci-dessous. Si la branche principale de votre dépôt s’appelle toujours master et non main, modifiez la valeur branches ci-dessus en conséquence.

1"release": {
2    "branches": ["main"]
3  }

6. Ajoutez également une clé publishConfig à votre fichier package.json :

1"publishConfig": {
2    "access": "public"
3 }

7. Vérifiez que tout fonctionne en effectuant une simulation avec le script npm semantic-release. Dans la commande suivante, remplacez les valeurs NPM_TOKEN= et GH_TOKEN= par vos jetons respectifs. Copiez ensuite la commande complète et exécutez-la dans votre terminal pour vérifier que tout fonctionne correctement. Le processus s’affichera dans la sortie de votre terminal. Si un problème survient, il apparaîtra ici avec des indications pour le résoudre.

8. Après avoir vérifié que la simulation se termine correctement, configurez votre dépôt GitHub avec une nouvelle GitHub Action pour automatiser la publication. Accédez à votre dépôt sur GitHub et cliquez sur « Actions ».

9. Cliquez sur l’option New workflow.

10. Renommez le workflow release.yml.

11. Ajoutez le script YAML ci-dessous au nouveau fichier de workflow. En résumé, ce script lance la tâche de publication une fois que le contrôle de sécurité Snyk s’est exécuté correctement. Cette tâche récupère le code, configure un environnement Node.js, installe vos dépendances, puis exécute Semantic Release à l’aide de vos jetons GitHub et npm.

1name: Release
2on:
3  workflow_run:
4    workflows: ['Snyk Security Check', 'Tests']
5    branches: [main]
6    types:
7      - completed
8
9permissions:
10  contents: read
11
12jobs:
13  release:
14    name: Release
15    runs-on: ubuntu-latest
16    permissions:
17      contents: write # to be able to publish a GitHub release
18      issues: write # to be able to comment on released issues
19      pull-requests: write # to be able to comment on released pull requests
20      id-token: write
21    steps:
22      - name: Checkout
23        uses: actions/checkout@v4
24        with:
25          fetch-depth: 0
26      - name: Setup Node.js
27        uses: actions/setup-node@v4
28        with:
29          node-version: 'lts/*'
30      - name: Install dependencies
31        run: npm ci
32      - name: Verify the integrity of provenance attestations and registry signatures for installed dependencies
33        run: npm audit signatures
34      - name: Release
35        env:
36          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
37          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
38        run: npx semantic-release

En résumé, ce script lance la tâche de publication une fois que le contrôle de sécurité et les tests Snyk se sont exécutés correctement. Cette tâche récupère le code, configure un environnement Node.js, installe vos dépendances, puis exécute Semantic Release à l’aide de vos jetons GitHub et npm.

• Remarque : GitHub Actions intègre un secret/une variable d’environnement GITHUB_TOKEN. Vous n’avez donc pas besoin de fournir le jeton d’accès personnel dans cet environnement. Le PAT sert uniquement aux tests locaux de votre configuration de Semantic Release.

12. Validez vos modifications locales et envoyez-les vers votre dépôt GitHub.

• Pour ce faire, exécutez la commande git commit -am '<your commit message>' dans votre terminal, puis git push.

• Vous pouvez également le faire dans VS Code grâce à sa fonctionnalité de gestion de versions.

13. Une fois tout configuré, vous pouvez utiliser les commits conventionnels pour pousser des modifications vers votre branche principale (ou en fusionnant des pull requests) : le workflow de publication s’exécutera alors (après la vérification de sécurité Snyk, bien sûr). Vous pouvez voir un exemple de cette opération dans le workflow du dépôt modern-npm-package.

Surveillance continue de la sécurité avec Snyk via GitHub

Intégrer des vérifications de sécurité directement au processus de commit de votre code est utile, mais des vulnérabilités peuvent apparaître entre deux commits. Par exemple, si vous n’avez envoyé aucun code dans votre dépôt depuis quelques mois, vous ne serez pas informé des nouvelles vulnérabilités découvertes pendant cette période. C’est là que Snyk vous aide encore davantage ! Lorsque vous connectez votre dépôt GitHub à Snyk, celui-ci surveille automatiquement l’apparition de nouvelles vulnérabilités et vous en informe, quelle que soit la fréquence à laquelle vous travaillez sur le projet. De plus, Snyk crée des pull requests automatisées pour corriger les problèmes de sécurité à votre place.

Deux produits Snyk sont particulièrement utiles pour garantir la sécurité du code de votre package npm et de ses dépendances. Snyk Code contribue à sécuriser le code de votre package, tandis que Snyk Open Source surveille vos dépendances open source afin de détecter les vulnérabilités.

Pour profiter pleinement de votre compte Snyk gratuit, suivez les étapes ci-dessous :

1. Connectez-vous à votre compte Snyk gratuit

2. Choisissez Ajouter un projet, puis GitHub.

3. Recherchez le dépôt de votre projet par son nom, puis cochez la case correspondante.

4. Vérifiez que le dépôt a bien été importé dans Snyk.

Commencez à créer des packages npm modernes

Récapitulons ce que vous avez appris dans cet article. Vous avez d’abord découvert comment configurer, créer et déployer un package npm simple. C’était une bonne façon de vous familiariser avec les étapes nécessaires pour publier votre premier package npm. Cependant, cette méthode est assez manuelle et difficilement viable si vous souhaitez créer un package npm destiné à la production.

Pour créer un package prêt pour la production, vous avez ensuite appris à générer des modules aux formats CommonJS (CJS) et ECMAScript (ESM), à configurer et rédiger des tests unitaires, à mettre en place des vérifications de sécurité et à automatiser la gestion des versions et la publication. Grâce à ces connaissances, vous êtes maintenant prêt à créer de nombreux packages npm faciles à utiliser par la communauté ou votre entreprise.

Essayez le vérificateur de code JavaScript gratuit de Snyk pour détecter et corriger les vulnérabilités de votre code.