Ich begann mit dem Erstellen einer Komponentenbibliothek, die ich auf NPM veröffentlichen möchte (und in anderen Apps wiederverwenden), indem ich eine React-App mit create-react-app . Leider scheint die create-react-app Standardkonfiguration das Erstellen solcher Komponentenbibliotheken nicht zu unterstützen ( siehe <) a href="https://github.com/facebookincubator/create-react-app/issues/423"> diese Probleme ). So scheint es, ich muss auswerfen.
Haben Sie Anweisungen, was Sie nach dem Auswerfen konfigurieren müssen, um daraus eine Komponentenbibliothek zu machen, die ich in anderen Apps wiederverwenden kann (ich denke, einige Dinge aus dem Webpack)?
Framing meine Kommentare in eine Antwort.
Nicht auswerfen! CRA versteckt eine Menge Zeug unter der Motorhaube und wirft sie aus. Es ist relativ einfacher, einfach Ihre src in ein anderes Projekt zu klonen, nachdem die Werkzeugeinrichtung abgeschlossen ist.
Und es ist nicht sehr schwierig, selbst eines einzurichten! Hier sind die Dinge, die Sie tun müssen:
babel und webpack Konfiguration , damit Ihr Code kompiliert.
Stellen Sie sicher, dass React und React-DOM als externe Abhängigkeiten in Ihrer package.json-Datei hinzugefügt und als Alias in Ihrer Datei webpack.config.js hinzugefügt werden. (Eine ausführliche Diskussion ist hier .) Dies ist wichtig, um sicherzustellen, dass Sie nur die kleinsten Pakete versenden. Auch Reagieren Sie nicht gut mit mehrere Kopien spielt.
Optional kann das gleiche für alle anderen schwereren Bibliotheken, z.B. Material-UI, Bootstrap, Lodash etc.
In webpack der Konfiguration entscheiden, wie Sie Ihre Bibliothek Exporte wollen sein sollte? Sie sollten mit UMD gut sein.
In main ( und optional module ) Einträge in Ihrem package.json , um npm Importe wissen zu lassen, woher die Komponenten importiert werden sollen.
Veröffentlichen es.
Fertig!
Oder Sie können einfach eines dieser superdünnen Komponentenprojekte klonen und dort Ihre Komponenten einfügen -
Es gibt auch komplettere Starter-Kits, aber IMO ist es wichtig, zuerst die Details selbst zu kennen, bevor Sie sie abstrahieren. Sobald Sie sich mit dem Prozess vertraut gemacht haben, sollten Sie versuchen, die Kits auch zu nutzen, da sie weit über die Grundlagen hinausgehen, wie Testintegration, Unterstützung von Storybooks und großartige npm-Publishing-Unterstützung.
UPDATES:
Der Zweck von CRA ist es, schnelles Experimentieren und On-Boarding zu ermöglichen, um die Entwicklung zu reaktivieren, ohne den (für Anfänger etwas komplizierten) Werkzeugaufbau zu durchlaufen. Der beabsichtigte Anwendungsfall von CRA, wie durch die "App" im Namen angegeben, ist die gesamte App, keine Komponente. Obwohl alles, was auf Sprachfeatures wie ES6 basiert, einige Tools erfordert, benötigt eine App normalerweise mehr Setups als eine Komponente. Z.B. Sie benötigen auch eine Serverkomponente, die den generierten Code hostet. CRA tut all dies und mehr für Sie.
Und wenn Sie an einer App arbeiten, werden Sie ausgeworfen, wenn Sie die Kontrolle über die Server-Seite übernehmen wollen. Es fügt in diesem Fall einen Mehrwert hinzu, da Sie den grundlegenden Host-Code erhalten, der von CRA während des Auswerfens automatisch erzeugt wird.
Um die Testanforderungen zu erfüllen, verfügt CRA auch über eine Jest-Integration, bei der es sich um einen Test-Runner mit reaktionsspezifischen Funktionen wie Snapshot-Tests handelt. Auch das manuelle Einrichten mit Ihrer Build-Pipeline ist eine Handvoll und CRA verbirgt wieder einmal all diese Komplexität vor Ihnen, so dass Sie sich einfach darauf konzentrieren können, die Tests zu schreiben.
Das ist super einfach - Sie brauchen das Webpack nicht, wenn Sie ein Paket veröffentlichen wollen. Installieren Sie es nicht nur für das, wenn Sie nicht möchten.
Wenn Sie ES6 verwenden:
Sie können ein einfaches Skript verwenden, um einen Ordner "dist" zu erstellen, mit dem babel die Dateien nach dem Übertragen erstellt:
%Vor%Was das bedeutet ist:
es , der ein Build-Ordner ist. src befinden, ändern Sie sie in den Speicherort Ihrer Dateien) und erstellen Sie den Ordner es mit den transpilierten Dateien. Um das obige Skript zu verwenden, müssen Sie die folgenden Abhängigkeiten installieren:
babel-cli / babel-core / babel-preset-es2015 / cross-env
Stelle sicher, dass du eine Datei .babelrc hast, damit Babel funktioniert:
Jetzt müssen Sie nur noch (nach dem Ausführen von npm run build:production ) ausführen:
Und Ihre Bibliothek wird in npm veröffentlicht. Dies ist auch der Befehl, den Sie ausführen, wenn Sie aktualisieren möchten, vergessen Sie nicht, die Versionsnummer in Ihrem package.json zu aktualisieren.
Falls Sie Dateien haben, die nicht in npm veröffentlicht werden sollen, haben Sie einfach eine Datei in Ihrem Wurzelverzeichnis namens .npmignore (ähnlich wie .gitignore ) und listen alles auf, was Sie ausgeschlossen haben möchten.
Wenn Sie ES6 nicht verwenden:
In diesem Fall müssen Sie nichts transponieren, gehen Sie einfach direkt zum Abschnitt npm publish und führen Sie es im Stammordner aus, den Sie veröffentlichen möchten.
create-react-app ist für die schnelle Einrichtung und Entwicklung von Apps gedacht, nicht wirklich für die Entwicklung von Bibliotheken. Zum einen erstellt create-react-app beim Erstellen eine index.html -Datei, die von Bibliotheken normalerweise nicht benötigt wird. Bibliotheken erfordern eine andere Konfiguration (viel weniger).
Ich habe mich selbst mit diesem Problem konfrontiert und eine React-Komponente für das Schreiben und die Veröffentlichung von React-Komponenten geschrieben: Ссылка , nach der Referenzierung, wie beliebte ES6-Bibliotheken geschrieben wurden, wie Redux .
Vorteile:
create-react-app sind Batterien enthalten Nachteile:
create-react-app . eject anyways) Es ist eine minimale Konfiguration enthalten und die Einrichtung ist einfach. Die verschiedenen Konfigurationen von Webpack, Babel und ESLint sollten verständlich sein.
Ich hoffe, Ihnen wird das weiterhelfen. Fühlen Sie sich frei, Vorschläge und Kommentare zu geben, wie es verbessert werden kann.
Tags und Links npm reactjs webpack create-react-app