Comment créer et publier des packages TypeScript sur NPM

À mesure que TypeScript gagne en popularité, de nombreux développeurs créent des packages typés statiquement pour profiter des avantages offerts par le langage. Dans cet article, nous couvrirons le processus de création et de publication d'un package NPM à l'aide de TypeScript.

1.Configurer l'environnement

Assurez-vous que Node.js, NPM et TypeScript sont installés. Vous pouvez installer TypeScript globalement avec :

npm install -g typescript

Vérifiez que tout est correctement installé :

node -v npm -v tsc -v

2.Création du projet

Commencez par créer un répertoire pour votre projet :

mkdir meu-pacote-typescript cd meu-pacote-typescript

Initialiser un projet Node.js :

npm init

Cela créera le fichier package.json dans lequel vous pourrez définir les informations de base du package.

3.Configurer TypeScript

Maintenant, initialisez un projet TypeScript :

tsc --init

Cela créera un fichier tsconfig.json. Modifiez-le si nécessaire, mais une configuration courante est la suivante :

{ "compilerOptions": { "target": "ES6", "module": "CommonJS", "declaration": true, "outDir": "./dist", "strict": true }, "include": ["src/**/*"] }

Ici, nous configurons le compilateur TypeScript pour générer du code ES6, avec des modules CommonJS, et inclure des déclarations de type (déclaration : true). Le code compilé sera placé dans le répertoire dist.

4.Écrire le code

Créez un répertoire src et à l'intérieur un fichier index.ts :

mkdir src touch src/index.ts

Dans le fichier index.ts, écrivez le code de votre package. Créons une fonction simple pour convertir les chaînes en majuscules :

export function toUpperCase(str: string): string { return str.toUpperCase(); }

5.Compilation du code

Compilez TypeScript en JavaScript :

tsc

Cela générera les fichiers JavaScript et les déclarations de type dans le répertoire dist.

6.Test du package localement

Pour tester votre package, vous pouvez l'installer localement dans un autre projet :

1. Dans le répertoire de votre projet de test, exécutez :

npm install ../caminho-para-o-diretorio-do-seu-pacote/dist

1. Utilisez la fonction dans le projet de test :

import { toUpperCase } from 'nome-do-seu-pacote'; console.log(toUpperCase('hello world')); // "HELLO WORLD"

Cela garantit que le code JavaScript et les déclarations de type fonctionnent correctement.

7.Publier sur NPM

Si tout fonctionne correctement, vous êtes prêt à publier votre package.

1. Connexion NPM

Si vous n'avez pas encore de compte NPM, créez-en un et connectez-vous :

npm login

1. Publication

Avant de publier, ajoutez un script de build à package.json :

"scripts": { "build": "tsc" }

Et ajoutez le chemin de sortie dans package.json :

"main": "dist/index.js", "types": "dist/index.d.ts"

Maintenant, compilez et publiez :

npm run build npm publish

Si le nom du package existe déjà, vous devrez choisir un nouveau nom.

8.Mise à jour du package

Pour publier une nouvelle version, modifiez la version dans package.json, exécutez à nouveau npm run build et publiez :

npm publish

9.Bonnes pratiques

• Documentation: Incluez un fichier README.md expliquant comment utiliser votre package.
• Tests: écrivez des tests à l'aide de frameworks comme Jest pour garantir que le code fonctionne comme prévu.
• Linting: utilisez des outils comme ESLint et Prettier pour maintenir la qualité du code.
• Versioning: suivez SemVer pour versionner votre package.

Conclusion

La création et la publication de packages TypeScript sur NPM améliorent non seulement la qualité du code, mais offrent également des avantages en matière de frappe à ceux qui consomment votre package. En suivant ce guide, vous serez prêt à partager vos solutions avec la communauté JavaScript et TypeScript, contribuant ainsi à un écosystème de développement plus fort et plus robuste.

Maintenant que vous connaissez le processus, que diriez-vous de commencer à créer votre prochain package TypeScript ?

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!