Ursprünglich veröffentlicht von Jonathan Saring am 17. September 2018 24,750 liest

@ysaringJonathan Saring

Ich schreibe Code und Wörter. Arbeiten auf github.com/teambit/bit

Wie man schnell ein privates Node.js-Paket-Repository mit Bit und NPM einrichtet und seine Komponenten teilt.

Die Einrichtung einer Node.js-Paketregistrierung ist oft der erste Schritt, um die gemeinsame Nutzung von Code zu skalieren und Ihrem Team das Leben ein wenig leichter zu machen.

Mehr Module gemeinsam zu nutzen bedeutet, weniger Code zu duplizieren. Es hilft auch bei der Entwicklung modularer und wartbarer Software. Der Aufwand für die Einrichtung und Pflege einer privaten NPM-Registry kann jedoch enorm sein.

Mit Bit können Sie den Großteil des Aufwands für eine private Registry vermeiden und gleichzeitig den Aufwand für den Paketierungs- und Veröffentlichungsprozess reduzieren.

In diesem kurzen Tutorial zeige ich Ihnen, wie Sie mit Bit eine private Node.js-Registry einrichten und Dutzende von Komponenten und Modulen in nur wenigen Minuten und in 3 Schritten veröffentlichen können.

1. Einrichten einer Node.js-Paketregistrierung in 30 Sekunden
2. Veröffentlichen Sie Module/Komponenten
3. Installieren Sie Pakete mit dem NPM/Yarn-Client

Lassen Sie uns beginnen.

• Sie können sich auch dieses kurze Video-Tutorial ansehen.

Richten Sie eine Node.js-Paketregistrierung für Ihre Komponenten

Lassen Sie uns eine private Paketregistrierung für Ihr Team einrichten.

Wir werden die Webplattform von Bit verwenden, um die Module zu hosten, die wir gemeinsam nutzen, und den nativen NPM/Yarn-Client, um sie zu installieren.

Zuerst müssen wir eine Registrierung einrichten.

a. Gehe rüber zu bit.dev und klicke auf get started.

b. Sign-Up. Es ist kostenlos.

c. Erstellen Sie eine Sammlung:

Um eine private Sammlung anzulegen, wählen Sie einfach „privat“. Das war’s!

Sie haben jetzt eine Sammlung in der Webplattform von Bit, die auch als Paketregistrierung fungiert. Schauen wir uns an, wie man Pakete in dieser Registry veröffentlicht.

Komponenten oder Module veröffentlichen

Nun veröffentlichen wir Module und Komponenten in unserer neu erstellten Registry. Da wir die Registry auf der Plattform von Bit eingerichtet haben, können wir Bit auch für diesen Arbeitsablauf nutzen, um wertvolle Zeit und Mühe zu sparen.

https://docs.bit.dev/

Zuerst installieren Sie Bit. Gehen Sie dann zu dem Projekt, in dem Sie die Pakete haben, die Sie veröffentlichen wollen. Beachten Sie, dass Sie, da wir Bit verwenden, Pakete direkt aus jedem bestehenden Projekt ohne Refactoring veröffentlichen können.

#1 Install Bit
npm install bit-bin -g

#2 Create a local workspace for your project
$ cd project-directory
$ bit init

Anstatt ein neues Repository zu erstellen, das Paket zu konfigurieren usw., lassen Sie uns Bit verwenden, um Komponenten und Module aus bestehenden Projekten zu isolieren und sie als Pakete zu veröffentlichen.

Lassen Sie uns Bit mit dem bit add Befehl auf die richtigen Pakete im Projekt verweisen.

Beispiel

Lassen Sie uns die Komponenten button, login und logo in der Verzeichnisstruktur des folgenden Projekts verfolgen.

$ 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

Um diese Dateien als Komponenten zu verfolgen, können wir bit add mit einem glob-Muster verwenden, das Bit auf den Pfad verweist, in dem sich die zu veröffentlichenden Module befinden.

$ bit add src/components/*
tracking 3 new components

Bitte beachten Sie, dass Bit automatisch die Datei &Paketabhängigkeiten des Moduls durchläuft und eine isolierte Umgebung für den Code erstellt, die alles enthält, was er braucht, um in anderen Projekten zu laufen.

Nun fügen wir Build- und Testumgebungen hinzu, damit Bit Ihre Pakete (in der Cloud) bauen und testen und die Ergebnisse für jedes Paket präsentieren kann. Eine Liste von vorgefertigten Umgebungen finden Sie hier.

Hier ist ein empfohlenes Beispiel für React-Komponenten.

$ bit import bit.envs/compilers/babel --compiler

$ bit import bit.envs/testers/mocha --tester

Sie können auch Ihre eigenen Umgebungen mit dem Erweiterungssystem von Bit implementieren. Für Unterstützung besuchen Sie den Gitter-Kanal oder das Discourse-Board von Bit.

Nun lassen Sie uns eine Version für die Pakete taggen, die wir veröffentlichen wollen (in Anlehnung an das vorherige Beispiel).

$ bit tag --all 1.0.0
3 components tagged | 3 added, 0 changed, 0 auto-tagged
added components: components/[email protected], components/[email protected], components/[email protected]

Als nächstes verwenden Sie bit login, um Ihre Maschine gegenüber der Bit-Plattform zu authentifizieren.

$ bit login
Your browser has been opened to visit: http://bit.dev/bit-login?redirect_uri=http://localhost:8085...

Schließlich exportieren (veröffentlichen) Sie die Pakete.

$ bit export user-name.collection-name
exported 3 components to scope user-name.collection-name

Das war’s!

Alle Ihre Pakete sind jetzt in Ihrer Sammlung verfügbar und können mit NPM/Yarn in jedem Projekt installiert werden. Ein Kinderspiel, und wir können diesen Arbeitsablauf nutzen, um eine große Anzahl von Paketen in kürzester Zeit zu veröffentlichen.

Pakete mit dem NPM/Yarn-Client installieren

Nun, da unsere Pakete fertig sind, lernen wir, wie man sie installiert.

Zuerst konfigurieren wir bit.dev als Registry für Ihren NPM-Client.

npm config set '@bit:registry' https://node.bit.dev

Das war’s 🙂

Jedes Paket kann nun mit Ihrem nativen NPM/Yarn-Client installiert werden.

Gehen Sie zur Komponenten-/Modulseite (Beispiel).

Sehen Sie sich das Fenster oben rechts an. Wählen Sie die Registerkarte „NPM“ und kopieren Sie den Befehl:

npm i @bit/user-name.collection-name.namespace.packagename

Sehen wir uns ein Beispiel an.

Hier ist eine React Hero Komponente, die als Paket freigegeben ist. Verwenden wir den folgenden Befehl, um sie zu installieren (Benutzer = bit, Sammlung = movie-app, Namensraum = components, Paketname = hero):

npm i @bit/bit.movie-app.components.hero

Das war’s. Sie können diese Pakete nun frei weitergeben und installieren, so als ob Sie sie in jeder anderen NPM-Registrierung veröffentlicht hätten. Das Beste

• JFrog Artifactory: Sie können auch die Artifactory von JFrog als Ihre Bit-Registry verwenden. Erfahren Sie mehr auf JFrogs Blog, um zu sehen, wie es gemacht wird.

Verteilter Entwicklungs-Workflow

Ein weiterer Vorteil der Installation von Paketen über die Bit-Registry ist, dass Sie Bit verwenden können, um eine Version des tatsächlichen Quellcodes der Pakete direkt aus jedem Projekt, an dem Sie arbeiten, zu importieren und Änderungen daran vorzunehmen.

Im Gegensatz zu anderen Registries, die einen umständlichen Prozess für das Klonen und Veröffentlichen von Änderungen an einem Paket erfordern, können mit Bit verschiedene Teammitglieder Pakete aus verschiedenen Projekten importieren und ändern.

Es hilft auch dabei, Änderungen zwischen ihnen zu synchronisieren, indem es intelligente Aktualisierungen und ein repoübergreifendes Merge-Dienstprogramm (Git-Erweiterung) verwendet.

Lassen Sie uns zum Beispiel diese Repo-Struktur betrachten.

$ tree .
.
├── bit.json
├── package.json
└── src
├── hello-world
│ ├── hello-world.js
│ └── index.js
└── utils
├── noop.js
└── left-pad.js

Wir werden Bit verwenden, um die Komponente left-pad in Ihr lokales Projekt zu importieren.

$ bit init
$ bit import bit.utils/string/left-pad --path src/left-pad

Wir können nun die gewünschten Änderungen vornehmen, tag und export sie zurück in die Sammlung (Erstellen einer neuen Version) oder in eine neue Sammlung zum Teilen.

Abschluss

In diesem kurzen Lehrgang haben wir gelernt, wie man:

• Einrichten einer NPM-Registry in 30 Sekunden
• Veröffentlichen von Paketen ohne Refactoring oder Boilerplating
• Installieren mit dem NPM/Yarn-Client
• Änderungen überall vornehmen und zusammenarbeiten

Mehr Code auf verwaltete Weise teilen, bei gleichzeitiger Verringerung des Aufwands und der Zeit, die mit diesem Prozess verbunden sind, bedeutet, dass Ihr Team die Entwicklung beschleunigen und die Wartung Ihrer Codebasis vereinfachen kann.

Fühlen Sie sich frei, loszulegen, Ihre eigene Registry einzurichten und Code zu teilen. Sie können sich das Projekt auf GitHub ansehen oder mit dem Team auf Gitter chatten. Thanks!

Tags