• Zuhause
  • Artikel
  • So veröffentlichen Sie eine React Native-Komponente in NPM - es ist einfacher als Sie denken
Veröffentlicht am 18-02-2019

So veröffentlichen Sie eine React Native-Komponente in NPM - es ist einfacher als Sie denken

Foto von Markus Spiske auf Unsplash

Sie möchten also zur Open Source Community beitragen? Das ist großartig! Das relativ junge Ökosystem von React Native zu fördern, ist großartig.

Als ich vor nicht allzu langer Zeit beschloss, diese Aufgabe zu übernehmen, bemerkte ich nicht viel Material rund um das Veröffentlichen von React Native-Komponenten in NPM. Ich hoffe also, dass dieser Beitrag den Prozess für andere wesentlich einfacher machen wird.

Hinweis: Der folgende Beispielcode stammt von "React-native-progress-steps", meinem ersten eigenen NPM-Paket.

Bevor Sie loslegen, registrieren Sie sich bitte für ein Konto bei NPM. Das kannst du hier machen.

Ersteinrichtung

Zuerst erstellen wir einen Ordner, in dem unsere React Native-Komponente leben wird.

mkdir  && cd 
# Zum Beispiel
mkdir meine-komponente && cd meine-komponente
Hinweis: Um diesen Artikel kurz zu halten, gehe ich davon aus, dass auf Ihrem Computer bereits Node und NPM installiert sind Wenn dies nicht der Fall ist, lesen Sie diese Dokumentation, um Hilfe zu erhalten.

Sobald Sie sich in dem Ordner befinden, müssen Sie ein neues NPM-Paket initialisieren, indem Sie npm init eingeben. Dadurch wird eine package.json-Datei erstellt, die wichtige Metadaten über die React Native-Komponente enthält.

Eine Reihe von Fragen wird angezeigt, z. B. Paketname, Version, Beschreibung, Schlüsselwörter usw.

Wichtig: Wenn Sie nach dem Einstiegspunkt gefragt werden, geben Sie unbedingt index.js ein und drücken Sie die Eingabetaste. Dies ist die Datei, die Ihre Hauptkomponente exportiert.

Projektstruktur

Im nächsten Schritt richten Sie eine Ordnerstruktur für Ihre React Native-Komponente ein. Das liegt ganz bei Ihnen, aber ich werde ein einfaches Beispiel von mir hier vorstellen:

Sie werden einige Dateien bemerken, die wir noch nicht erstellt haben. Wir werden uns in Kürze damit befassen.

Erstellen wir die Datei index.js. Dies ist die wichtigste Datei für den ordnungsgemäßen Export / Import Ihrer Komponente. Navigieren Sie zum Stammprojektordner und geben Sie touch index.js ein.

Es gibt verschiedene Möglichkeiten, den Inhalt dieser Datei zu untersuchen.

  • Schreiben Sie die Komponentenklasse direkt in die Datei index.js und exportieren Sie sie dort.
  • Erstellen Sie eine separate Komponenten-JavaScript-Datei und exportieren Sie sie in index.js.
    • Schließlich müssen Sie viele Komponenten- und Container-JavaScript-Dateien erstellen und alle erforderlichen Dateien in der Datei index.js exportieren. Dies ist der Ansatz, den ich verfolgt habe und in dem folgenden Beispiel zu sehen ist.
    • Unabhängig davon, welcher Ansatz gewählt wird, was in diese Datei exportiert wird, ist das, was die konsumierende App letztendlich importiert und rendert. Das ist das Wichtige, woran man denken muss.

      importieren Sie {ProgressSteps, ProgressStep} aus 'Reaktiv-native-Fortschrittsschritte';

      Abhängigkeiten

      Wir müssen feststellen, welche Abhängigkeiten installiert werden müssen, damit unsere React Native-Komponente ordnungsgemäß funktioniert.

      Es gibt drei verschiedene Arten von Abhängigkeiten:

      • peerDependencies: Diese Abhängigkeiten sind für die Ausführung der Komponente erforderlich. Es wird jedoch erwartet, dass sie bereits in der App installiert sind. Ein Beispiel dafür ist Reaktiver selbst. Im Falle von React Native ist es jedoch nicht erforderlich, Reactative als Peer-Abhängigkeit
      • Abhängigkeiten: Diese sind auch für die Ausführung der Komponente erforderlich. Sie können jedoch nicht davon ausgehen, dass die verbrauchende App diese installiert hat Einige Beispiele wären lodash und Requisiten.
      • devDependencies: Diese sind einfacher. Dies sind alle Pakete, die zur Entwicklung der React Native-Komponente erforderlich sind. Beispiele hierfür wären Ihr Linter, Ihr Test-Framework und Ihr Babylon.
      • Babel-Abhängigkeit installieren

        Unser nächster Schritt besteht darin, unsere Komponente an Babel anzuschließen. Wir können dies einfach tun, indem wir die folgende dev-Abhängigkeit installieren:

        npm install Metro-React-native-Babel-Preset

        Nachdem die Installation abgeschlossen ist, müssen Sie eine .babelrc-Datei erstellen und Folgendes hinzufügen:

        {
        "Presets": ["Modul: Metro-React-native-Babel-Preset"]
        }

        .Gitignore und .npmignore erstellen

        Einer der letzten Schritte ist das Erstellen der Standarddateien .gitignore und .npmignore als bewährte Methode. Dadurch werden auch Probleme bei der Veröffentlichung in NPM vermieden.

        Testen

        Normalerweise ist es relativ unkompliziert, unser Paket lokal mit Apps zu verknüpfen und zu installieren, ohne zuerst bei NPM veröffentlichen zu müssen.

        Dies würde durch Verwendung des Befehls npm link in unserem Paketstammverzeichnis geschehen. Navigieren Sie dann zu einer App und geben Sie npm link und dann npm install ein.

        Zum Zeitpunkt der Erstellung dieses Artikels funktionieren "React Native" und der Befehl "npm link" nicht optimal.

        Die Problemumgehung, die ich für dieses Problem gefunden habe, besteht darin, zu einer App zu navigieren und unser Paket direkt über den Verzeichnispfad zu installieren.

        npm i 
        # Zum Beispiel
        npm i ../meine- komponente

        Nachdem Sie Änderungen an Ihrem Paket vorgenommen haben, müssen Sie die App erneut besuchen und erneut installieren.

        Dies ist keine ideale Lösung, aber sie funktioniert. Eine weitere Option besteht darin, einen Ordner / Examples innerhalb Ihres NPM-Pakets zu erstellen und ein reaktives Projekt mithilfe von Reactative Init zu initialisieren. Dann können Sie das Paket dort direkt testen.

        Hinweis: Dies erfordert, dass React Native bereits auf Ihrem Computer installiert ist. Sie können hier dem Facebook-Guide folgen.

        Veröffentlichung in NPM

        Schließlich sind wir bereit, unsere React Native-Komponente mit der großartigen Open-Source-Community zu teilen!

        Das Publizieren ist sehr schnell und einfach. Melden Sie sich einfach mit npm login bei Ihrem NPM-Konto an und veröffentlichen Sie sie anschließend mit npm publish.

        Es ist zu beachten, dass NPM vor jeder Veröffentlichung die Version in package.json erhöht.

        Fazit

        Wir haben eine Menge Material in diesem Beitrag behandelt. Wenn Sie auf irgendwelche Probleme stoßen, können Sie mir gerne eine Frage in den Kommentaren geben. Vielen Dank, dass Sie mir folgen, ich kann es kaum erwarten zu sehen, was Sie bauen!

        Beiträge, Pull-Anfragen und Empfehlungen sind immer willkommen, um die Schritte des reaktiven Ursprungs fortzusetzen. Probieren Sie es in Ihrem nächsten Projekt aus und lassen Sie mich wissen, was Sie denken!

Siehe auch

Mein erstes Jahr als Software Engineer: Ein RückblickLernen Sie verschiedene JavaScript-Umgebungen in React Native kennenWarum ein README erstellt wurde, ist zu meinem Lieblingsteil der Entwicklung gewordenWir sind was wir tunRedux Free gehen