Ich versuche, in NPM eine mit React erstellte Komponentenbibliothek zu veröffentlichen.
Ich möchte nicht, dass es externe Abhängigkeiten hat, sogar React-Module, um die kleinstmögliche Dateigröße zu haben und weil der Benutzer diese Abhängigkeiten in der App hinzufügen wird.
Ich verwende npm und webpack , um die Abhängigkeiten zu verwalten.
Dies ist meine package.json Abhängigkeiten:
In meiner webpack.config.js Datei habe ich einen Einstiegspunkt als 'component.jsx' und gebe ihn als 'lib.js' Datei aus
Ich habe auch das "externals" -Attribut mit den react-Modulen eingefügt, um zu vermeiden, dass webpack es in die 'lib.js' -Ausgabe aufnimmt.
%Vor%Schließlich ist dies die einfache React-Komponente, die ich veröffentlichen möchte:
%Vor%Ich habe es NPM veröffentlicht und es in einem anderen Projekt installiert. Als ich versuchte, es nach dem Import der React-Anweisung zu verwenden, gibt es einen Fehler, der besagt, dass React nicht definiert ist (bundle.js: 28448 Uncaught ReferenceError: React ist nicht definiert)
Mein Code zum Testen der Komponente:
%Vor%Fehle ich etwas in der Abhängigkeitskonfiguration?
Danke
Webpack externals wird standardmäßig auf libraryTarget gesetzt. Das heißt, wenn Sie nichts angeben, wird das externe Objekt als var ausgegeben und als globale Variable ausgegeben.
Webpack-Ausgabe mit global:
%Vor% Sie müssen ihm sagen, dass er in den installierten Modulen nach der Abhängigkeit suchen soll (zu require it). Um dies zu tun, ändere dein Äußeres zu:
Erforderliche Änderung (in webpack.config):
%Vor%Und dann wird es mit commonjs ausgeben.
Webpack-Ausgabe mit commonjs:
%Vor%Verweis auf Webpack-Dokumente hier .
Beachten Sie, dass ich Ihre externen Daten wieder in Kleinbuchstaben geändert habe, da der Wert der zu suchende Abhängigkeitsname sein sollte (in diesem Fall react und react-dom ).
(Wenn Sie kein node_module bündeln möchten, empfehle ich Ihnen übrigens, webpack-node- Äußerlichkeiten )
Sie erstellen die Ausgabedatei als lib.js , aber beim Rendern lesen Sie bundle.js . Bitte benennen Sie die Ausgabedatei als bundle.js um oder fügen Sie lib.js in Ihrem index.html anstelle von bundle.js ein.
Ich habe eine vollständige mittlere Geschichte geschrieben, weil ich das gleiche Problem hatte wie du und es gibt keine Informationen darüber. Schau es Dir an: Ссылка
Das wichtigste Problem besteht darin, das externe 'react': 'commonjs react' in der Datei webpack.config.js
Tags und Links dependencies npm reactjs components