Comment développer des modules JS optimaux

Cette fois je vais vous montrer comment développer le module JS optimal et quelles sont les précautions pour développer le module JS optimal Voici des cas pratiques, jetons un oeil.

De nombreuses personnes ont publié leurs propres modules JavaScript sur npm Lors de l'utilisation de certains modules, j'obtiens souvent l'erreur "Ce module est très utile, mais ce serait le cas". mieux si tu pouvais xxx", pensa-t-il. Par conséquent, cet article résumera comment rendre le module plus utile du point de vue des utilisateurs du module.

Fournit l'accès aux modules ES6

Le webpack et le rollup prennent en charge certaines optimisations statiques pour les modules ES6 (telles que Tree Shaking et Scope Hoisting), ils liront d'abord le champ du module dans package.json comme entrée du module ES6. S'il n'y a pas de module, ils le liront. Le champ principal sert de point d'entrée au module CommonJS. L'approche habituelle est la suivante : utilisez la syntaxe ES6 pour écrire le code source, puis utilisez des outils d'empaquetage de modules combinés à des outils de conversion de syntaxe pour générer Modules CommonJS et modules ES6, afin que les champs principaux et les champs de module puissent être fournis.

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 TypeScript erreurs de compilation ; de plus, ce n'est pas seulement convivial pour les utilisateurs de TypeScript, car la plupart des éditeurs de code (Webstorm, VS Code, etc.) peuvent le reconnaître. Les déclarations de type de TypeScript peuvent fournir des indications de code plus précises et avertir les utilisateurs lorsqu'ils transmettent un nombre ou un type de paramètres incorrect. La meilleure pratique consiste à utiliser TypeScript Écrivez votre module et les déclarations de type seront automatiquement générées 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 index.d.ts dans le répertoire racine de votre module ou déclarez le champ de saisie dans package.json pour fournir l'emplacement du fichier de déclaration.

Laissez le module s'exécuter dans

Node.js

et dans le navigateur en même temps Vous pouvez déterminer si le module est actuellement exécuté dans Node.js ou dans un navigateur en détectant s'il existe une variable globale nommée window (telle que !!typeof window), puis utiliser différentes manières pour implémenter votre fonctionnalité.

Cette méthode est relativement courante, mais si l'utilisateur utilise un outil de packaging de modules, cela entraînera Node.js L'implémentation du navigateur sera incluse dans le fichier de sortie final. En réponse à ce problème, la communauté open source a proposé d'ajouter un navigateur à package.json Proposition de champ, 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. Cependant, 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 module. Le champ sera ignoré. Par conséquent, l’outil de packaging n’optimisera pas votre code. Veuillez vous référer à cette question pour plus de détails.

Si vous souhaitez uniquement remplacer certains 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 http dans Node.js. Le module initie la requête et un autre implémente la même fonctionnalité en utilisant XMLHTTPRequest dans le navigateur. Afin d'utiliser les fichiers appropriés, le code de votre module doit toujours

require

(‘./path/to/http.js’) et déclarer dans package.json :

De cette façon, lorsque votre module est utilisé dans l'outil de packaging, celui-ci inclura uniquement le code de xhr.js dans le fichier de sortie final.

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

Armez votre projet de divers services

La plupart des projets JavaScript sont open source et la communauté open source propose également de nombreux services gratuits pour les projets open source, qui peuvent fournir une aide plus puissante à votre projet. Voici quelques-uns des plus couramment utilisés.

Le service le plus couramment utilisé dans un projet est l’intégration continue. Le service d'intégration continue peut 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. Travis CI, CircleCI et AppVeyor. Travis CI est gratuit pour les projets open source et est disponible sur Linux et OS X L'environnement d'exécution ; CircleCI est gratuit pour les projets open source et privés, mais a une limite d'exécution de 1 500 minutes par mois ; AppVeyor fournit Windows ; L'environnement d'exploitation est également gratuit pour les projets open source.

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

Si vous souhaitez que vos modules soient entièrement testés sous différentes versions de différents navigateurs et plates-formes, vous pouvez également utiliser Sauce Labs et BrowserStack. Ils sont tous deux gratuits pour les projets open source, mais vous devez envoyer un e-mail pour postuler.

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 de npm, le volume de téléchargement, l'état de réussite des tests, la couverture des tests, la taille du fichier, si les dépendances sont obsolètes, etc.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Étapes pour mettre en œuvre le développement d'un site multipage avec webpack+express

Résumé de l'utilisation du framework Webpack

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!