Maison >interface Web >js tutoriel >Créez et publiez une bibliothèque npm, avec TypeScript et Semantic Versioning

Créez et publiez une bibliothèque npm, avec TypeScript et Semantic Versioning

DDD
DDDoriginal
2024-09-13 14:15:10941parcourir

? Écrire et publier un code minimal

Pour publier une bibliothèque sur npm, vous aurez besoin de :

  1. Un compte npm ; vous pouvez vous inscrire ici.

  2. Votre code en tant que projet ; c'est-à-dire que vous avez un package.json dans votre répertoire de code, dont le nom et la version sont spécifiés. Notez que vous pouvez générer ce fichier via :

npm init
  1. Un index.js dans votre projet. N'oubliez pas que vous devez exporter votre fonction pour permettre aux utilisateurs de l'importer.

Remarque : Si votre script n'est pas nommé index.js et placé à la racine du projet, vous devez spécifier la propriété "main" dans package.json. Voir cette réponse pour plus d'informations.

Et si le nom a été pris sur npm, vous pouvez ajouter un préfixe comme @name-or-org/your-lib ; c'est ce que font la plupart des autres bibliothèques de nos jours.

Vous pouvez consulter mon exemple minimal pour référence, mais je pense que vous pouvez écrire quelque chose de plus cool que cela.

Create and publish an npm library, with TypeScript and Semantic Versioning

Enfin, publiez-le avec la commande CLI :

npm publish

Create and publish an npm library, with TypeScript and Semantic Versioning

Remarque aux personnes qui définissent le nom du package avec un préfixe : Il DOIT être votre nom d'utilisateur npm ou le nom de votre organisation que vous avez enregistré sur npm. Par exemple, je peux utiliser @remi_guan comme préfixe mais pas les autres.

De plus, vous devez exécuter npm submit --access public, car npm pense que vous souhaitez publier un package privé, qui est une fonctionnalité payante.

Cette sortie signifie que l'opération a réussi. Toutefois, si vous rencontrez des problèmes, vous pouvez effectuer une recherche sur Google pour résoudre le problème. Et voici comment vous pouvez utiliser votre propre bibliothèque :

Create and publish an npm library, with TypeScript and Semantic Versioning

Si vous avez suivi ce guide, essayez plutôt votre propre bibliothèque.

J'ai également trouvé que @backendbro propose un guide beaucoup plus détaillé que celui-ci, si vous souhaitez en savoir plus.

Après avoir publié votre code, lorsque vous souhaitez mettre à jour le code, vous pouvez réexécuter npm submit. Cependant, avant la publication, vous devez mettre à jour la propriété de version de package.json et veuillez vous conformer au contrôle de version sémantique.

Je vous propose de l'essayer ! Pouvez-vous publier la version 1.0.1 ou 1.1.0 de votre bibliothèque et l'utiliser dans un autre projet comme ce que je viens de faire ? Pouvez-vous savoir comment mettre à jour la version de votre bibliothèque npm ?

? Utiliser TypeScript

Cette bibliothèque que nous avons créée jusqu'à présent n'est pas moderne, elle manque de déclaration de type afin que les personnes qui utilisent votre bibliothèque ne puissent pas être mises en évidence lors de la saisie. De plus, les gens utilisent couramment TypeScript avec la syntaxe ECMAScript. Pour connaître la différence : Modules Node.js : CommonJS vs. ECMAScript par Saisathish

Mais je vais ignorer la configuration détaillée de TypeScript dans cet article. Il existe de nombreux bons tutoriels pour apprendre à initialiser un projet TypeScript, comme « Comment développer une bibliothèque Typescript » d'inapeace0.

Encore plus loin, vous pouvez utiliser un référentiel TypeScript de modèles comme alexjoverm/typescript-library-starter qui a déjà intégré de nombreux outils modernes, meilleures pratiques, etc.

Je vais juste mentionner quelques notes importantes si vous publiez une bibliothèque TypeScript :

  1. Construisez avant de publier. Si vous devez le publier publiquement, les personnes disposant de l'environnement Node.js le plus courant ne peuvent exécuter que des fichiers .js. Vous devez donc compiler votre code avec tsc, rollup (ou vite, qui utilise rollup) ou webpack ; tout le monde va bien.

Vous devez pointer correctement vers le fichier compilé en utilisant les propriétés de module, main ou d'entrée dans package.json. Utiliser un modèle et les apprendre un par un est un bon choix. Encore une fois, alexjoverm/typescript-library-starter les a bien spécifiés.

  1. Inclure un fichier .d.ts. Pour la même raison, l'utilisateur doit également accéder aux signatures de type.

Mais si vous êtes sûr que votre bibliothèque fonctionnera sur Deno, Bun ou ts-node, vous pouvez ignorer mes directives ci-dessus car elles prennent en charge l'exécution native du code TypeScript.

Veuillez essayer de suivre un guide pour créer une bibliothèque TypeScript et la publier sur npm. C'est toujours aussi simple, comme le premier exemple. Vous devriez le tester avec un autre projet en utilisant la syntaxe d'importation, et vous pourrez voir des astuces de type avec un IDE.

Avec TypeScript, je peux écrire ma bibliothèque dans cette syntaxe :

Create and publish an npm library, with TypeScript and Semantic Versioning

Et après la publication, je peux l'installer et l'importer, et voir les astuces de type grâce à TypeScript.

Create and publish an npm library, with TypeScript and Semantic Versioning

✨ Semantic Versioning

There's a common but slightly advanced problem waiting to be solved: Each time we update our package, we need to edit the version code.

That's annoying, especially if you're frequently updating your code.

However, there are tools to help you out.

  • semantic-release: Fully automatic; you can integrate it into GitHub CI to automatically update the version code and publish to npm each time you update your code on GitHub.
  • release-it: Also helps you bump the version, but it's simple to use (no need for CI knowledge); meanwhile, you don't configure it as fully automated.

Create and publish an npm library, with TypeScript and Semantic Versioning

I used ChatGPT to generate this summary comparing the two tools. For new coders, I'd suggest you try release-it, but semantic-release is also convenient if you know how to integrate it with CI.

In this post I'm going to show you how to use release-it, well, after you have made change to the project, simply run this in your project:

npx release-it

And choose is it a minor change or major change, then you're done!

Create and publish an npm library, with TypeScript and Semantic Versioning


Summary

So there you have it! We've walked through publishing a simple npm library, updating it, and even using TypeScript to make it more modern and robust. Remember to:

  • Export your functions properly so others can use them.
  • Update your version numbers following Semantic Versioning.
  • Consider using TypeScript for better type safety and developer experience.
  • Automate your releases with tools like release-it or semantic-release to save time.

Give it a try! Publish your own library, update it, and see how it feels to contribute to the npm ecosystem. Happy coding!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn