Node around USModules

Laisse - moi réfléchir 8. 2021-09-15 07:26:41
node usmodules


Introduction

Xiaoming reçoit une demande.Voilà la demande:” Mise à jour T (sdk) À Q (App) Compatible avec PProjets (h5) “.La demande est simple,En théorie, il suffit de mettre à jour A C'est tout..Mais ce n'est pas facile dans la pratique.Énumérez - en un.case

WeChat8a7c83caf458ab6fbe65825e5fe2fb7d.png

errorLa Déclaration d'erreur a été choquante,Xiao Ming a commencé à vérifier.Xiao Ming a trouvé un message crucial dans les détails d'erreur de la console C'est - à - dire que les informations d'erreur proviennent de T/buff.js. Xiao Ming a découvertbuff.jsEn fait, une fonction est intégrée.La fonction est montée parwindowUtilisation globale.Une telle ligne de code à l'intérieur


init(){
if(window.buff){
console.error('buff has been initialized')
return
}
window.buff = () => {}
}
Copier le Code

La source de l'erreur a été trouvée.La raison en est quewindow.buff Une logique de jugement répétée a été déclenchée lors de l'initialisation error. Pourquoi l'initialisation se répète - t - elle? . Xiao Ming a continué à vérifier. . Qu'est - ce qui provoque une initialisation répétée ici? . Trouve Xiao Ming et trouve un indice. .InPDans le projet. Plus que référencé dans le projet T Avec d'autres paquets internes tels que E A également été introduit T. Dans le projet node_modules C'est leur relation.

WeChat1912f06dca3bc683d511795d1a16a324.png J'ai compris. Il s'avère que cette relation imbriquée a deux parties T Tout le Code a été exécuté. . A conduit à une duplication error. Mais comment cette structure imbriquée est - elle apparue? ?

Commençons par comprendre quelques Concepts

nodeQu'est - ce que c'est?

Node.js Est open source et multiplateforme JavaScript Environnement opérationnel.C'est compréhensible.node Similaire au navigateur .PourJS L'opération fournit le support sous - jacent . Basé sur la fonctionnalité multiplateforme . Node.js Oui. Web Infrastructure essentielle pour le développement de première ligne .Aussi pourReact/vue/webpack Et ainsi de suite .

WeChat7d2b1c55d33879f15c51ce3e469e2612.png

npmQu'est - ce que c'est?

npm - Oui. Node.js Gestionnaire de paquets standard . Au début, c'était pour la gestion. node.js Dépendances dans le projet . Le développement progressif ultérieur fait partie intégrante des projets d'ingénierie de première ligne . C'est aussi le plus grand registre de logiciels au monde. . Utilisé par les développeurs open source de tous les continents npm Pour partager et emprunter des paquets , De nombreuses organisations utilisent également npm Pour gérer le développement privé .

node_modulesQu'est - ce que c'est?

node_modules Est un répertoire en soi . Tous les éléments utilisés dans le projet sont résumés dans le catalogue npm Paquet ou paquet dépendant . Il est généré par npmContrôle.

Snipaste_2021-09-13_00-01-45.png

node_modules Peut être divisé en global et local

Par exemple, nous installons lodash:

npm install lodash //npm Pour nous lodash Installé localement node_modules Dans le document.
Copier le Code

Adoption -g Nous pouvons installer des paquets dans le monde entier :

npm install lodash -g //npm Pour nous lodash Installer dans un emplacement global .
Copier le Code

On peut passer par npm root -g Commande pour voir où le paquet global est installé

Snipaste_2021-09-12_23-46-58.png

node_modules Le fichier d'étalonnage généré est dans le projet package.jsonDocumentation.

package.json

package.json Est un fichier d'étalonnage dépendant dans un projet , Ou comme une liste . Dans ce fichier . Couvre tous les paquets dépendants dans le projet actuel .

Options Interprétation
dependencies dependencies Est nécessaire pour l'environnement de production
devDependencies devDependencies Est quelque chose dont vous avez besoin dans votre environnement de développement
peerDependencies Le plug - in de développement est Paquets dépendants du plug - in
name Nom du projet
version Version
main Entrée du projet (Par défautes5)
module es6 Entrée du Code du module (Offretree shakingMécanismes)
author Auteur
scripts Écrire des commandes de script exécutables

Version

  1. Bibliothèque publique en tant que npm Membres de. Toujours suivre npm Contraintes d'itération de version fournies . Format du numéro de version :Numéro de version principal.Numéro de version secondaire.Numéro de révision.
  • Numéro de version principal: Modifications incompatibles ou dérogations perturbatrices
  • Numéro de version secondaire: Nouvelles fonctionnalités compatibles vers le bas
  • Numéro de révision: Correction du problème de compatibilité descendante

// Gérer les commandes communes de numéros de version 
major: Numéro de version principal
premajor: Préparation de la version principale
minor: Numéro de version secondaire
preminor: Sous - version préliminaire
patch: Numéro de révision
prepatch: Préparation de la révision
prerelease: Version pré - version
Copier le Code

Nous pouvons synchroniser les commandes ci - dessus pour mettre à jour les versions du projet .Par exemple

// ./mySdk/package.json
"version": "0.0.1",
npm version prerelease //version => 0.0.1-0
npm version prepatch // version => 0.0.2
npm version preminor // version => 0.1.1
npm version premajor // version => 1.0.1
Copier le Code

Nous pouvons également gérer les versions avec des modificateurs .Par exemple

  • ^:Par exemple,^1.2.5, Représente la gamme de versions 1.*.*Mise à jour
  • ~:Par exemple,~1.2.5, Représente la gamme de versions 1.2.* Mise à jour

Version globale préférée

Il y a une question que nous avons tous les jours package.json Il ne semble pas y avoir beaucoup de dépendance, mais pourquoi node_modules Il y aura tant de fichiers .Nous savons quenpm Les paquets plug - in auront également leurs propres paquets dépendants . Donc leur dépendance pourrait être .

Snipaste_2021-09-14_11-37-29.png

Il y a un composant dans la figure ci - dessus C Ne dépend pas seulement P Et dépend également AMoyenne. Cette dépendance exige C Prise en charge de la coexistence de plusieurs versions . C'est le problème de Xiaoming. . Par coïncidence.T Parce qu'il s'agit d'une opération globale . Donc ce n'est pas supporté ou interprété comme T La version ne veut pas que plusieurs versions coexistent . Quelles sont les raisons de cette coexistence multi - versions? .Voyons un demo Dans le projet ansi-regex Diagramme de dépendance du plug - in

Snipaste_2021-09-14_13-10-39.png

Innode_modules La structure du Répertoire est la suivante: :

Snipaste_2021-09-13_00-17-20.png

ansi-align Version haute dépendante ansi-regex Dépend à plusieurs reprises ansi-align Denode_modules.Ethas-ansi Les versions inférieures dépendantes ne sont pas dépendantes en double . Pour que nous puissions dialyser npm Politique de version pour :

  • Version dépendante du plug - in > Version globale ( Plug - innode_modules Qui dépendent d'eux seuls )

  • Version dépendante du plug - in <= Version globale ( La version plug - in dépend du Global )

Comment éviter la coexistence de plusieurs versions? ?

1> peerDependencies

package.jsonPour nous fournirpeerDependenciesOptions. peerDependencies Le but est de demander à l'environnement hôte d'installer un plug - in satisfaisant peerDependencies Paquets dépendants spécifiés ,Insdk Paquets dépendants de l'importation interne , Sera installé uniformément en référençant l'environnement hôte npmVersion du paquet. Cela évite la coexistence de plusieurs versions

2> Dépendances des intervalles ( Évitez d'écrire des dépendances mortes )

npm Pour augmenter la flexibilité de la résolution de version ,Basé surnode-semver  A introduit operator.Cesoperator Permet de spécifier une plage de versions de bibliothèques dépendantes . Comme d'habitude:< 、> 、<= 、>= 、= . La valeur par défaut est = .


"vue": ">0.0.8" // vue Doit être supérieur à 0.0.8Version
"vue": "1.1.2 - 1.3.1" //vue Doit satisfaire 1.1.2 à 1.3.1 Cette section
Copier le Code

Aplatissement de la structure

Snipaste_2021-09-13_15-24-09.png

Comme le montre la figure. Quand il y a une telle dépendance de nidification profonde ,Correspondantnode_modules C'est comme ça que ça se passe? ( C'est horrible. ).

Nous sommes toujours demo Dépendances globales dans le projet ansi-align Exemple de plug - in

IndemoDans le projet package-lock.json C'est leur dépendance. :

Snipaste_2021-09-13_00-35-06.png

Dépendance essentielle - Oui. ansi-align -> string-width -> strip-ansi -> ansi-regex.Mais danspackage-lock.json Ils sont structurellement dépendants mais égaux La topologie est la suivante:

Snipaste_2021-09-14_11-43-41.png

C'est pour ça qu'il n'est pas difficile npm La façon dont les nids profonds sont traités les aplatira dans l'environnement actuel node_modules. C'est - à - dire aplatir la dépendance profonde .

package-lock.json

Ce fichier est conçu pour suivre la version exacte de chaque paquet installé , Afin que le produit puisse être 100% Copier( Même si le responsable du paquet met à jour le paquet ----Extrait denodejs.cn/

Nous devons d'abord comprendre quelques Concepts

  • ^:Par exemple,^1.2.5, Représente la gamme de versions 1.*.*Mise à jour
  • ~:Par exemple,~1.2.5, Représente la gamme de versions 1.2.* Mise à jour
  • 1.2.5, Représente une version fixe 1.2.5
  • Préfixe par défaut ~npm config set save-prefix '~'
  • N'utilisez pas de préfixe , Enregistrer la version exacte :npm config set save-exact true

En coursnpm i Sans verrouillage de version npm La version plug - in updatable sera mise à jour pour nous . Il n'y a souvent pas qu'une seule personne dans un projet d'ingénierie. . Il y a donc un scénario A DépendanceB 1.2.0 Il n'y a pas de problème.Et C Après avoir cloné le projet npm install AprèsB Mise à jour vers1.2.1 C'est parti. bug.

C'est le problème avec les dépendances de version .Peut passer 1.2.0 Version fixe de cette façon . Mais je ne peux pas le contrôler. B Les dépendances des plug - ins sont également fixes . package-lock C'est pour s'attaquer à ce phénomène . Il définit les dépendances dans le projet . Pour s'assurer que tout le monde a la même dépendance. .

Enfin

node_modules Dans notre développement quotidien . En fait, c'est une boîte noire. . En général, nous n'avons pas besoin de nous soucier de l'installation du paquet plug - in . De nombreuses équipes mettent les affaires publiques et la logique npm Mode de service du plug - in . Un autre scénario est celui où le projet devient de plus en plus volumineux . Les paquets dépendants deviennent de plus en plus complexes . La gestion des versions dans un projet peut également devenir particulièrement importante .

版权声明
本文为[Laisse - moi réfléchir 8.]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/09/20210914164426005M.html

  1. 350 questions d'entrevue Android partage, technologie d'architecture de cache
  2. The space is not vulgar, the configuration is rich, the leather is durable, less worry, and the high configuration is less than 100000!
  3. Vous permet de passer rapidement à travers l'entrevue de saut d'octets et d'aller de l'avant
  4. Résumé des questions d'entrevue technique d'Alibaba Baidu et d'autres grandes usines à la fin de l'année, et analyse de la dernière vraie question d'entrevue Android en 2021
  5. Avec cet ensemble de questions d'entrevue Java, l'ensemble de questions de base d'entrevue de bat,
  6. Avec cet ensemble de questions d'entrevue Java, les notes avancées Java de niveau divin sont systématisées,
  7. Opérateurs arithmétiques et opérateurs de comparaison pour JavaScript, Introduction classique au développement web
  8. Explorer le cadre open source Android - 1. Okhttp Source Analysis
  9. Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)
  10. Partager l'expérience de l'examen et du développement de l'arrière - plan, en s'appuyant sur les questions d'entrevue et les réponses,
  11. Site Web pour partager vos expériences d'entrevue, Tencent Bull vous apprend à écrire votre propre cadre Java!
  12. Notes d'étape Android structurées, sélection de vrais problèmes d'entrevue Android
  13. Dictionnaire distribué: communication de cache limitée par le courant, sujets d'entrevue pour certaines questions courantes dans le développement Java,
  14. Tianci girlfriend Tangyuan attended the event for the second time. Her appearance was comparable to that of a star. The audience shouted that Tianci was blessed!
  15. Introduction au JavaScript chapitre 15 (objets, clairvoyance)
  16. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  17. Basic knowledge of components in Vue "I"
  18. J'a i appris quelques petites choses sur l'entrevue et j'ai acheté un tutoriel en 19998.
  19. Dix minutes pour vous faire passer en revue les points de connaissance que Spring demande souvent, le chemin du retour Jedi d'un programmeur âgé de 35 ans,
  20. Want to know the implementation and application of single instance mode in the front end?
  21. Progressive react source code analysis - Implementation of ref API
  22. Webpack5 learning -- code compression
  23. Front and back end data interaction (V) -- what is Axios?
  24. Knowledge points related to react routing
  25. On demand introduction of react antd + customized theme
  26. GPG management submission signature verification
  27. [babylonjs] babylonjs practice (XII) -- drawing lane lines
  28. After brushing the 12 sliding windows, you can tear the front end by hand
  29. Vue fruit bookkeeping - money.vue component
  30. Propriétés et méthodes des objets Array en javascript!,Pseudo - classes et pseudo - éléments pour CSS
  31. JS contains the function code
  32. Typescript record (I)
  33. Take you to learn more about nginx basic login authentication: generating passwords using OpenSSL
  34. Is componentization obsolete? Introduction to micro front end architecture
  35. Leetcode day 18
  36. Simple code to achieve a, 1W + people see the Mid Autumn Festival blessing
  37. Design pattern -- agent pattern
  38. Vs Code theme recommendation in 2021
  39. Mon expérience réelle dans l'externalisation Android à Huawei, préparation de l'entrevue de développement Android
  40. J'ai les questions et les réponses d'entrevue de développement d'octets de rêve et Tencent double offer, Android
  41. Fatal Magic: countless sacrifices under gorgeous magic
  42. Mon expérience d'entrevue principale est partagée avec l'expérience d'apprentissage
  43. Mon expérience d'entrevue Android de Tencent partage, plugin Android
  44. Partage de questions d'entrevue Java à double saut d'octets non - premier cycle, un article vous apprend à gérer l'entrevue réseau informatique,
  45. Questions d'entrevue CSS (notes)
  46. Syntaxe de base de la classe
  47. Héritage de classe
  48. Mise en œuvre simple de 30 minutes pour un filtrage rapide des chaînes de tableau 10W +.
  49. Vue 3 tri des documents démarrage rapide
  50. Collection de code de base JavaScript (1)
  51. National secret nginx Container actual Fighting
  52. Quelques lignes de css pour rendre votre page tridimensionnelle
  53. C'est super détaillé, de "finir" ce 300 pages de 1000 questions d'entrevue,
  54. Take you in-depth understanding of nginx basic login authentication (including all configuration steps and in-depth analysis)
  55. Après avoir mangé, assurez - vous d'augmenter votre salaire de 5K et de rester debout tard pour trier les questions d'entrevue Java de millet.
  56. Résumé des questions d'entrevue pour les entreprises Internet nationales de première ligne, qui doivent être posées lors de l'entrevue d'emploi Java de la grande usine en 2021,
  57. "L'amour à première vue", la nouvelle BMW 2 coupe réelle, vous êtes surpris?
  58. Questions d'entrevue de test avancé de Dachang, liste des compétences de base de l'entrevue Java,
  59. Tableau 2D trié par un champ
  60. JS est souvent utilisé pour déterminer si l'objet est vide