So teilen Sie reagierte Komponenten zwischen Apps mit Bit

Bit: Ein leistungsstarkes Werkzeug für die effiziente gemeinsame Nutzung von React -Komponenten

In diesem Artikel wird Bit eingeführt, ein Open -Source -Tool, mit dem die Effizienz der Code -Sharing zwischen Projekten, insbesondere React -Komponenten, mit extrem niedrigem zusätzlichem zusätzlichem Overhead erheblich verbessert werden kann. Entwickler können Bit verwenden, um Teile der Codebasis zu teilen und sie in anderen Projekten zu verwenden, um Änderungen einfach zu synchronisieren, ohne die Codebasis zu teilen oder die Quellcodestruktur zu ändern.

Der Kernvorteil des Bits besteht darin, dass es die Darstellung des gemeinsam genutzten Code aus dem Dateisystem des Projekts entkoppelt. Dies bedeutet, dass Sie die Komponenten angeben können, die Bit aus Ihrem Projekt teilen und exportieren möchten, ohne die Struktur oder den Quellcode zu ändern. Nach der Freigabe können diese Komponenten mit Ihrem bevorzugten Paketmanager installiert und in jeder Projektumgebung geändert und aktualisiert werden.

Bit bietet auch eine Funktion namens "Scopes", eine Sammlung gemeinsamer Komponenten mit gemeinsamen Eigenschaften. Dies verbessert die Entdeckbarkeit und präsentiert deutlich die Komponenten, die in Projekte verwendet werden. BIT kann die Entwicklungszeit erheblich verkürzen, eine Konsistenz zwischen den Projekten sicherstellen und die Wartung und Aktualisierungen der Komponenten verbessern.

Komponenten -Ära

Ein Rahmen von UI -Komponenten wie React ermöglicht es uns, die Benutzeroberfläche in unabhängige wiederverwendbare Komponenten aufzuteilen, die unabhängig entwickelt und verwendet werden können. Daher können React -Komponenten häufig über mehrere Projekte und Anwendungen hinweg angepasst und wiederverwendet werden.

, anstatt die Arbeit zu wiederholen oder das Rad neu zu erfinden, nutzen Sie die Modularität und Wiederverwendbarkeit von Komponenten, um sie zwischen Projekten zu teilen.

Bit ist genau ein solches Open -Source -Projekt, das in Verbindung mit Git und NPM funktioniert, um die Codefreigabe zu beschleunigen, den zusätzlichen Aufwand von Spaltungs -Code -Basen zu reduzieren und mehrere Pakete zu ändern. Sie können Teile jedes vorhandenen Repositorys problemlos teilen, sie in anderen Projekten verwenden und Änderungen problemlos synchronisieren.

Schwierigkeiten bei der Teilen von Komponenten

Betrachten Sie eine React -Anwendung mit acht wiederverwendbaren Komponenten (im Verzeichnis SRC/Komponenten), von denen einige auch globale Stile verwenden. Wenn Sie eine dieser Komponenten in einer anderen Anwendung verwenden möchten, bevor Bit angezeigt wird, besteht der Hauptansatz darin, das Repository aufzuteilen, ein neues Repository zu erstellen, alle erforderlichen Konfigurationen (einschließlich Build- und Testumgebungen) hinzuzufügen und ein Paket zu veröffentlichen. Für acht Komponenten muss dieser Vorgang achtmal wiederholt werden und verursacht auch Code -Duplikation. Es endet mit neun Repositorys und es werden Änderungen zwischen ihnen vorgenommen.

lerna kann helfen, zwingt jedoch, dass die Projektcodebasis in einen Monorepo neu gestaltet werden kann. Trotzdem erfordert es eine manuelle Definition und Wartung von Einstellungen und Abhängigkeitsbäumen für alle diese Pakete in der Anwendung. Darüber hinaus sind alle diese Pakete schlecht gefunden, was die Adoption noch schwieriger macht. Angesichts dieses zusätzlichen Overheads entscheiden sich die meisten Menschen möglicherweise, den Code zu kopieren und einfügen, was eine sehr schlechte Praxis ist.

Aktienreaktionskomponenten mit Bit

Bit ist der schnellste Weg, um Reaktionen mit wenig zusätzlichem Overhead zu teilen.

Bit muss die Codebasis nicht in mehrere Repositorys aufteilen, ermöglicht es Ihnen jedoch, Komponenten einfach aus jedem vorhandenen Repository zu teilen und in anderen Repositories und Projekten mit NPM zu verwenden.

Die Kernidee des Bits besteht darin, die Darstellung des gemeinsam genutzten Code aus dem Dateisystem des Projekts zu entkoppeln. Sie können also einfach auf die Komponente verweisen, die Sie teilen und aus Ihrem Projekt exportieren möchten, ohne die Struktur oder den Quellcode tatsächlich zu ändern. Nach der Freigabe können Sie Ihren bevorzugten Paketmanager verwenden, um Komponenten zu installieren.

Ein weiterer Vorteil des Bits besteht darin, dass der tatsächliche Quellcode in mehreren Repositories verfolgt wird. Sie können damit auch den Code der Komponente einfach importieren und ihn von jedem anderen Projekt ändern und Bit für Sie synchronisieren lassen Ändern.

Bit verfolgt Komponenten im Quellcode, indem die Darstellung von Komponenten aus der tatsächlichen Dateistruktur entkoppelt wird und es uns ermöglicht, eine Datei oder die Teilmenge von Dateien schnell in wiederverwendbare Komponenten umzuwandeln. Unter Verwendung eines einfachen Glob -Musters (wie unten gezeigt) können Komponenten aus der gesamten Bibliothek oder dem gesamten Projekt sofort freigegeben werden, ohne den Quellcode selbst oder die Dateistruktur zu ändern.

Jede Komponente kann allein in jeder Anwendung oder einem Projekt freigegeben, entdeckt und verwendet werden. Es kann auch in jeder Projektumgebung geändert und aktualisiert werden und wählen, ob und wie Ihre Freunde Ihre Komponenten aus ihrem eigenen Projekt (und umgekehrt) aktualisieren.

freigegebene Komponenten können in "Scopes" kombiniert werden, die als "Wiedergabeliste" einer einzelnen Komponente angesehen werden können, die gemeinsame Attribute teilt. Bei der Verwendung des Free Bit Community Center wird jeder Komponente mit den vorliegenden visuellen Effekten, Testergebnissen, semi-automatisch erzeugten Dokumenten und mehr dargestellt.

Unabhängig davon, mit welchem ​​Tool Komponenten installiert werden, haben wir die vollständige Kontrolle über das Abhängigkeitsdiagramm und ein klares Verständnis der in Projekte verwendeten Komponenten. Der gemeinsame Code kann auch dazu beitragen, die Benutzeroberfläche mit Entwurfsprinzipien auszurichten, da wir Änderungen leicht steuern können, wenn dieselbe Komponente in verschiedenen Projekten wiederholt implementiert wird.

Schnellstart

Folgendes ist ein Beispiel dafür, wie die UI -Komponenten der Taste, Anmeldung und Logo in der Projektverzeichnisstruktur geteilt werden:

<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>

Installieren Sie zuerst Bit und initialisieren Sie es für das Projekt:

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

Verwenden Sie nun Bit, um diese Komponenten zu verfolgen. Vergessen Sie nicht, Build- und Testumgebungen hinzuzufügen.

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

Verwenden Sie nun Bit, um Versionen zu sperren und ihre Abhängigkeiten zu definieren:

<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>

Teilen Sie nun die Komponente an das Remote -Bereich:

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

Beachten Sie, dass Sie die exportierte Komponenten --eject mit dem package.json -Flag aus dem Quellcode entfernen und als Paketabhängigkeit zum Projekt

hinzufügen können.

Das war's. Sie können jetzt Komponenten mit NPM und Garn installieren oder ihren Code von jedem Projekt einfach bearbeiten und aktualisieren.

Sie können es hier verwenden: [Bit Official Website -Link] (Bit Official Website -Link sollte hier eingefügt werden)

Änderungen in jedem Projekt vornehmen

Wenn Sie eine Codekomponente verwenden, die geändert werden muss, können Sie Ihre Komponente mit Bit importieren, sie direkt im Projektkontext ändern und zurückgeben. Mit dem Flag eject können Sie die Komponente sogar wieder in eine Paketabhängigkeit in Ihrem Projekt einbringen.

Beachten Sie, dass Bit auch wenn der Code tatsächlich in diesen Projekten generiert wird, Quellcodeänderungen in verschiedenen Projekten verfolgen und synchronisieren können. Wenn Sie es vorziehen, können Sie es als "kontrollierte Kopierkopie" ohne Duplizierung betrachten.

optimal

Bit ist wahrscheinlich der schnellste Weg, um Reaktionen mit minimalen zusätzlichen Kosten zu teilen. Mit Bit können Sie das Kopieren und Einfügen von Code vermeiden und es einfacher machen, Komponenten zu ändern und zu warten, während sie in verschiedenen Anwendungen verwendet werden.

Ihr gesamtes Team kann alle Komponenten im Bereich organisieren und verschiedene Versionen für die Verwendung an verschiedenen Orten erstellen. Neue Teammitglieder können diese Komponenten leicht entdecken und sich Ihrer Arbeit mit vorhandenen Code anschließen, den Sie bereits geschrieben haben.

Bit ist ein Open -Source -Projekt, mit dem Sie loslegen, Feedback geben oder es verbessern können, wie Sie möchten!

FAQs zum einfachen Teilen von React -Komponenten mit Bit

(häufig gestellte Fragen sollten hier hinzugefügt werden, der Inhalt steht im Einklang mit dem FAQ -Teil des Originaldokuments, aber der Wortlaut kann leicht eingestellt werden, um es natürlicher und glatter zu machen.)

Hinweis: Das obige ist eine pseudooriginelle Erstellung, die auf Ihren Anforderungen basiert. Bitte ersetzen Sie den Platzhalter "[Bit Official Website]" gemäß der tatsächlichen Situation.

Das obige ist der detaillierte Inhalt vonSo teilen Sie reagierte Komponenten zwischen Apps mit Bit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!