Comment rendre les modules js plus utiles

De nombreuses personnes ont utilisé les modules JavaScript partagés sur npm, mais parfois les modules JavaScript qu'ils utilisent seraient meilleurs s'ils étaient plus faciles à utiliser. Par conséquent, cet article résumera du point de vue des utilisateurs du module comment rendre le module plus utile. .être plus utile.

Fournir l'accès aux modules ES6

Le webpack et le rollup prennent en charge une certaine optimisation statique des modules ES6 (tels que Tree Shaking et Scope Hoisting), et ils le feront prendre la priorité Lire le champ module dans package.json comme entrée du module ES6. S'il n'y a pas de module, le champ principal sera lu comme entrée du module CommonJS. L'approche habituelle consiste à écrire le code source en utilisant la syntaxe ES6, puis à utiliser l'outil d'empaquetage de modules combiné à l'outil de conversion de syntaxe pour générer des modules CommonJS et des modules ES6, afin que les champs principaux et de module puissent être fournis en même temps.

Fournir des fichiers de déclaration de type TypeScript

Si vos utilisateurs utilisent TypeScript mais que votre module ne fournit pas de fichier de déclaration, ils devront ajouter un bout de code au projet pour éviter les erreurs de compilation TypeScript ; de plus, cela n'est pas seulement convivial pour les utilisateurs qui utilisent TypeScript, car la plupart des éditeurs de code (Webstorm, VS Code, etc.) peuvent reconnaître les déclarations de type TypeScript et peuvent fournir des astuces de code plus précises en conséquence. une invite sera émise lorsque l'utilisateur transmet un nombre ou un type de paramètres incorrect.

La meilleure façon est d'écrire votre module en TypeScript, qui générera automatiquement des déclarations de type au moment de la compilation. De plus, vous pouvez également gérer manuellement un fichier de déclaration en vous référant à la documentation. Vous pouvez ajouter un fichier index.d.ts à la racine de votre module, ou fournir l'emplacement du fichier de déclaration dans le champ de saisie de package.json.

Laissez le module s'exécuter dans Node.js et le navigateur en même temps

Vous pouvez le savoir en vérifiant s'il existe une variable globale nommée window (comme ! !typeof window ) Que le module soit actuellement exécuté dans Node.js ou dans le navigateur, utilisez différentes manières pour implémenter vos fonctionnalités.

Cette méthode est relativement courante, mais si l'utilisateur utilise un outil d'empaquetage de modules, cela entraînera l'inclusion des implémentations de Node.js et du navigateur dans le fichier de sortie final. En réponse à ce problème, la communauté open source a proposé d'ajouter le champ navigateur dans package.json. Actuellement, le webpack et le rollup prennent déjà en charge ce champ.

Le champ du navigateur peut être utilisé de deux manières :

Fournissez un chemin de fichier vers le champ du navigateur comme entrée du module lorsqu'il est utilisé du côté du navigateur, mais il devrait Il convient de noter que l'outil d'empaquetage donnera la priorité à l'utilisation du chemin de fichier spécifié dans le champ du navigateur comme entrée du module, donc votre champ de module sera ignoré, ce qui empêchera l'outil d'empaquetage d'optimiser votre code. Veuillez vous référer à cette question pour plus de détails.

Si vous souhaitez uniquement remplacer certains de ces fichiers, vous pouvez déclarer un objet.

Par exemple, supposons que vous ayez deux fichiers dans votre module : http.js et xhr.js. Le premier fichier utilise le module http dans Node.js pour lancer une requête, et l'autre utilise le module http dans. le navigateur. XMLHTTPRequest implémente la même fonctionnalité. Afin d'utiliser le fichier approprié, vous devez toujours require('./path/to/http.js') dans le code de votre module et le déclarer dans package.json :

{
"browser" : {
"./path/to/http.js": "./path/to/xhr.js"
}
}

De cette façon, lorsque Lorsque le module est utilisé dans l'outil d'empaquetage, l'outil d'empaquetage inclura uniquement le code de xhr.js dans le fichier de sortie final.

Armez votre projet de divers services

La plupart des projets JavaScript sont open source, et la communauté open source fournit également de nombreux services gratuits pour les projets open source. Elle peut en fournir davantage. une aide puissante pour votre projet. Voici quelques-uns des plus couramment utilisés.

Le service le plus couramment utilisé dans un projet est l'intégration continue. Les services d'intégration continue peuvent placer des tâches telles que les tests, la détection du style de code et l'empaquetage sur le serveur et les exécuter automatiquement lorsque vous soumettez le code. Les services couramment utilisés incluent Travis CI, CircleCI et AppVeyor. Travis CI est gratuit pour les projets open source et fournit Linux et OS

Après avoir exécuté les tests, vous pouvez également télécharger la couverture du test sur Coveralls. Ce service vous permet de parcourir la couverture de test de votre code en ligne.

Si vous souhaitez que votre module soit entièrement testé sous différentes versions de navigateurs et de plateformes, vous pouvez également utiliser Sauce Labs et BrowserStack. Ils sont tous deux gratuits pour les projets open source, mais ils doivent être publiés par. e-mail.

Enfin, Shields IO fournit une variété d'icônes qui peuvent fournir de nombreuses informations supplémentaires sur votre projet, y compris, mais sans s'y limiter, le numéro de version npm, le volume de téléchargement, l'état de réussite du test, la couverture des tests, la taille du fichier, si la dépendance est expirée, etc.

Bien que la plupart des suggestions ci-dessus soient la cerise sur le gâteau, elles rendront votre module plus convivial. J'espère que les suggestions ci-dessus pourront vous aider lorsque vous développerez votre propre module.

Le contenu ci-dessus explique comment rendre le module js plus utilisable. J'espère qu'il pourra aider tout le monde.

Recommandations associées :

Explication détaillée de la programmation modulaire JavaScript

Explication détaillée de la programmation modulaire JavaScript

Explication détaillée du développement modulaire JavaScript

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!