Maison> interface Web> js tutoriel> le corps du texte

Comment créer et publier des packages TypeScript sur NPM

WBOY
Libérer: 2024-08-18 07:08:07
original
989 Les gens l'ont consulté

Como Criar e Publicar Pacotes TypeScript no 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
Copier après la connexion

Vérifiez que tout est correctement installé :

node -v npm -v tsc -v
Copier après la connexion

2.Création du projet

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

mkdir meu-pacote-typescript cd meu-pacote-typescript
Copier après la connexion

Initialiser un projet Node.js :

npm init
Copier après la connexion

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
Copier après la connexion

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/**/*"] }
Copier après la connexion

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
Copier après la connexion

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(); }
Copier après la connexion

5.Compilation du code

Compilez TypeScript en JavaScript :

tsc
Copier après la connexion

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
Copier après la connexion
  1. Utilisez la fonction dans le projet de test :
import { toUpperCase } from 'nome-do-seu-pacote'; console.log(toUpperCase('hello world')); // "HELLO WORLD"
Copier après la connexion

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
Copier après la connexion
  1. Publication

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

"scripts": { "build": "tsc" }
Copier après la connexion

Et ajoutez le chemin de sortie dans package.json :

"main": "dist/index.js", "types": "dist/index.d.ts"
Copier après la connexion

Maintenant, compilez et publiez :

npm run build npm publish
Copier après la connexion

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
Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
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
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!