Comment partager les composants react entre les applications avec bit

bit: un outil puissant pour le partage efficace des composants de réaction

Cet article présente Bit, un outil open source qui peut considérablement améliorer l'efficacité de partage de code entre les projets, en particulier les composants réagis, avec des frais généraux supplémentaires extrêmement faibles. Les développeurs peuvent utiliser le bit pour partager des parties de la base de code et les utiliser dans d'autres projets pour synchroniser facilement les modifications sans diviser la base de code ni modifier la structure du code source.

L'avantage principal du bit est qu'il découple la représentation du code partagé à partir du système de fichiers du projet. Cela signifie que vous pouvez spécifier les composants qui souhaitent les partager et les exporter à partir de votre projet sans modifier sa structure ou son code source. Une fois partagés, ces composants peuvent être installés à l'aide de votre gestionnaire de packages préféré et peuvent être modifiés et mis à jour dans n'importe quel environnement de projet.

Bit fournit également une fonctionnalité appelée "Scopes", une collection de composants partagés avec des propriétés communes. Cela améliore la découvre et présente clairement les composants utilisés dans les projets. Le bit peut réduire considérablement le temps de développement, assurer la cohérence entre les projets et améliorer la maintenance et les mises à jour des composants.

ère des composants

Un cadre de composants d'interface utilisateur comme React nous permet de diviser l'interface utilisateur en composants réutilisables indépendants qui peuvent être développés et utilisés indépendamment. Par conséquent, les composants React peuvent souvent être ajustés et réutilisés sur plusieurs projets et applications.

Plutôt que de répéter des travaux ou de réinventer la roue, tirez parti de la modularité et de la réutilisabilité des composants pour les partager entre les projets.

Bit est exactement un projet open source qui fonctionne en conjonction avec GIT et NPM pour accélérer le partage de code, réduire les frais généraux supplémentaires de la division des bases de code et de modification de plusieurs packages. Vous pouvez facilement partager des parties de tout référentiel existant, les utiliser dans d'autres projets et synchroniser facilement les modifications.

DIFFIDITIONS DANS LES COMPOSITIONS Partage

Considérons une application React avec huit composants réutilisables (situés dans le répertoire SRC / Components), dont certains utilisent également des styles globaux. Si vous souhaitez utiliser l'un de ces composants dans une autre application, avant d'apparaître, l'approche principale consiste à diviser le référentiel, à créer un nouveau référentiel, à ajouter toutes les configurations nécessaires (y compris les environnements de construction et de test) et de publier un package. Pour huit composants, ce processus doit être répété huit fois, et il provoque également la duplication de code. Il se retrouve avec neuf référentiels entretenus et des changements sont apportés entre eux.

Lerna peut aider, mais il oblige la base de code du projet à être refactorisée dans un monorepo, et même ainsi, il nécessite toujours une définition manuelle et une maintenance des paramètres et des arbres de dépendance pour tous ces packages dans l'application. De plus, tous ces packages sont mal trouvés, ce qui rend l'adoption encore plus difficile. Face à ces frais généraux supplémentaires, la plupart des gens peuvent finir par choisir de copier et coller le code, ce qui est une très mauvaise pratique.

Partagez les composants de réaction avec bit

Le bit est le moyen le plus rapide de partager les composants React avec peu de frais généraux supplémentaires.

Bit n'a pas besoin de diviser la base de code en plusieurs référentiels, mais vous permet de partager facilement des composants à partir de tout référentiel existant et de les utiliser dans d'autres référentiels et projets utilisant NPM.

L'idée principale du bit est de découpler la représentation du code partagé à partir du système de fichiers du projet. Ainsi, vous pouvez simplement pointer le bitre du composant que vous souhaitez partager et l'exporter à partir de votre projet sans modifier réellement sa structure ou son code source. Une fois partagé, vous pouvez utiliser votre gestionnaire de packages préféré pour installer des composants.

Un autre avantage du bit est qu'il garde une trace du code source réel trouvé dans plusieurs référentiels, vous pouvez donc également l'utiliser pour importer facilement le code du composant et le modifier à partir de tout autre projet et le synchroniser les bits pour vous Changement.

Bit suit les composants du code source en découplant la représentation des composants à partir de la structure de fichiers réelle et nous permet de convertir rapidement n'importe quel fichier ou sous-ensemble de fichiers en composants réutilisables. En utilisant un modèle glob simple (comme indiqué ci-dessous), les composants de la bibliothèque ou du projet entier peuvent être partagés immédiatement sans modifier le code source lui-même ou la structure de fichiers.

Tout composant peut être partagé, découvert et utilisé dans n'importe quelle application ou projet seul. Il peut également être modifié et mis à jour dans n'importe quel environnement de projet et peut choisir si et comment amener vos amis à mettre à jour vos composants à partir de leur propre projet (et vice versa).

Les composants partagés peuvent être combinés en "Scopes", qui peuvent être considérés comme une "liste de lecture" d'un seul composant qui partage des attributs communs. Lorsque vous utilisez le centre communautaire Free Bit, chaque composant est présenté avec les effets visuels qu'il présente, les résultats des tests, les documents générés semi-automatiquement, etc.

Quel que soit l'outil utilisé pour installer des composants, nous avons un contrôle total sur le diagramme de dépendance et une compréhension claire des composants utilisés entre les projets. Le code partagé peut également aider à aligner l'interface utilisateur avec les principes de conception, car nous pouvons facilement contrôler les modifications lorsque le même composant est implémenté à plusieurs reprises dans différents projets.

Démarrage rapide

Ce qui suit est un exemple de la façon de partager les composants de l'interface utilisateur du bouton, de la connexion et du logo dans la structure du répertoire du projet:

<code>$ tree
.
├── App.js
├── App.test.js
├── favicon.ico
├── index.js
└── src
    └── components
        ├── button
        │   ├── Button.js
        │   ├── Button.spec.js
        │   └── index.js
        ├── login
        │   ├── Login.js
        │   ├── Login.spec.js
        │   └── index.js
        └── logo
            ├── Logo.js
            ├── Logo.spec.js
            └── index.js

5 directories, 13 files</code>

Tout d'abord, installez-le et initialisez-le pour le projet:

<code>npm install bit-bin -g
cd project-directory
bit init</code>

Utilisez désormais le bit pour suivre ces composants. N'oubliez pas d'ajouter des environnements de construction et de test.

<code>bit add src/components/* # 使用glob模式跟踪多个组件，或使用单个路径跟踪单个组件。</code>

Utilisez maintenant Bit pour verrouiller les versions et définir leurs dépendances:

<code>$ bit tag --all 1.0.0
3 components tagged | 3 added, 0 changed, 0 auto-tagged
added components:  components/button@1.0.0, components/login@1.0.0, components/logo@1.0.0</code>

Partagez maintenant le composant avec la portée distante:

<code>$ bit export username.scopename  # 将组件共享到此Scope
exported 3 components to scope username.scopename</code>

Notez qu'à l'aide de l'indicateur --eject, vous pouvez supprimer les composants exportés du code source et les ajouter au fichier Project package.json en tant que dépendance du package.

c'est tout. Vous pouvez désormais installer des composants à l'aide de NPM et du fil, ou utiliser Bit pour modifier et mettre à jour facilement leur code à partir de n'importe quel projet.

Vous pouvez commencer à l'utiliser ici: [Bit le lien de site Web officiel] (Bit le lien officiel du site officiel doit être inséré ici)

apporter des modifications à tout projet

Si vous utilisez un composant de code qui doit être modifié, vous pouvez importer votre composant à l'aide de bit, le modifier directement dans le contexte du projet et le partager. À l'aide du drapeau eject, vous pouvez même faire ressortir le composant dans une dépendance de package dans votre projet.

Notez que même si le code est réellement généré dans ces projets, Bit est capable de suivre et de synchroniser les modifications du code source sur différents projets. Si vous préférez, vous pouvez le considérer comme une "copie-coller contrôlée" sans duplication.

optimal

est probablement le moyen le plus rapide de partager les composants React avec un minimum de coûts supplémentaires. Avec Bit, vous pouvez éviter de copier et de coller du code et de faciliter le changement et la maintenance des composants tout en les utilisant dans différentes applications.

Toute votre équipe peut organiser tous les composants dans la portée et créer différentes versions à utiliser dans différents endroits. Les nouveaux membres de l'équipe peuvent facilement découvrir ces composants et rejoindre votre travail avec le code existant que vous avez déjà écrit.

Bit est un projet open source que vous pouvez démarrer, donner des commentaires ou aider à l'améliorer comme vous le souhaitez!

FAQ sur le partage facilement des composants de react avec bit

(Des questions fréquemment posées doivent être ajoutées ici, le contenu est cohérent avec la partie FAQ dans le document d'origine, mais le libellé peut être légèrement ajusté pour le rendre plus naturel et lisse.)

Remarque: Ce qui précède est une création pseudo-originale basée sur vos exigences. Veuillez remplacer l'espace réservé "[bit officiel du site officiel]" en fonction de la situation réelle.

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!