Maison > Article > interface Web > Optimisation du module JavaScript

Optimisation du module JavaScript

亚连original: 2018-06-15 23:38:331205parcourir

Je voudrais partager avec vous comment développer de meilleurs modules et fonctions JavaScript. Les amis intéressés peuvent en tirer des leçons.

De nombreuses personnes ont publié leurs propres modules JavaScript développés sur npm, et en train d'utiliser certains modules, je pense souvent "ce module est très utile, mais ce serait mieux s'il pouvait xxx". Par conséquent, cet article résumera comment rendre le module plus utile du point de vue des utilisateurs du module.

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 liront le package first Le champ module dans .json sert de point d'entrée du module ES6. S'il n'y a pas de module, le champ principal sera lu comme point d'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 principal et 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 déterminer si le module est actuellement exécuté dans Node en détectant s'il existe une variable globale nommée window (telle que comme !!typeof window) .js ou dans le navigateur, puis utilisez différentes manières pour implémenter vos fonctions.

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 votre module est utilisé dans l'outil de packaging, celui-ci 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, qui peuvent fournir à votre projet une aide plus puissante. , 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é 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 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.

Ce qui précède est le texte que j'ai compilé, j'espère qu'il sera utile à tout le monde

Articles Liés

Voir plus