Kann keine React-Komponente benötigen

Question

Ich bin gerade dabei, Module aus einem monolithischen React-Projekt zu extrahieren, damit sie getrennt in meiner npm-Registry gespeichert werden können, aber ich kann sie nicht korrekt exportieren und importieren. Bevor ich versuchte sie zu extrahieren, benutzte ich:

const Component = require("./component.js"); 

und mit webpack alles zu bündeln. Das hat gut funktioniert. Ich habe dann die Komponente in ein separates Projekt verschoben, das ich mit Webpack gebündelt habe. Ich kann es nicht als npm-Abhängigkeit funktionieren lassen. Hier ist der Grundcode für die Komponente:

// Some require statements 
... 
var Component = React.createClass({...}); 
module.exports = Component; 

Der Build-Prozess gibt das Bündel/bundle.js zu bauen, und die package.json sieht wie folgt aus:

{ 
    "name": "component", 
    "version": "0.0.2", 
    "description": "...", 
    "main": "build/bundle.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build-dev": "webpack", 
    "build-min": "NODE_ENV=production webpack && uglifyjs ./build/bundle.js -c -m -o ./build/bundle.min.js --source-map ./build/bundle.min.js.map", 
    "prepublish": "npm run build-min" 
    }, 
    "publishConfig": { 
    "registry": "registry" 
    }, 
    "author": "esaron", 
    "license": "UNLICENSED", 
    "dependencies": { 
    ... 
    }, 
    "devDependencies": { 
    ... 
    } 
} 

Und ich bin den Import es mit:

const Component = require("component"); 

Wenn ich versuche, die Seite zu laden, sehe ich die folgende Fehlermeldung in der Konsole:

bundle.js: 1299 Nicht erfasste Invariante Verletzung: Der Elementtyp ist ungültig: erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten), aber erhalten: Objekt. Überprüfen Sie die Rendermethode exports.

Und wenn das Debuggen, sicher genug, um den Anruf erforderlich ist, mir geben

Component Object = {}

ich die gleichen Ergebnisse, wenn ich die bundle.js erfordern direkt nachdem ich es in das Projekt kopiert habe, habe ich das Gefühl, dass ich einfach nicht meinen Build aufbauen und den richtigen Weg veröffentlichen muss, und nachdem ich eine Weile gesucht habe, konnte ich nicht herausfinden, was ich falsch gemacht habe.

Answer 1

Sie sollten Ihre Komponenten nicht bündeln, wenn sie in ihre eigenen Pakete getrennt werden. Wenn sie ES6 verwenden, ist es eine gute Idee, sie mit Babel als Vorveröffentlichungsschritt zu transpilieren, aber Sie müssen sie nicht bündeln.

Denken Sie darüber nach, was der Bündelschritt mit Ihrer Komponente macht. Es geht durch Ihren Einstiegspunkt und zieht alle erforderlichen Abhängigkeiten in eine einzige Datei ein. Das bedeutet, dass das Ergebnis von bundle.js alle reaktionsbezogenen, reaktionsbezogenen und sonstigen Daten, die Sie von Ihrer Komponente benötigen, erfasst hat.

Nur Ihre Hauptanwendung (die die Komponentenpakete erfordert) benötigt einen Bündelschritt. Hier werden alle Abhängigkeiten aufgelöst, einschließlich derer, die verschachtelt sind, und sie werden zusammen in die bundle.js Ihrer App kopiert, um sicherzustellen, dass Sie nicht mit doppelten Kopien von Bibliotheken wie react in Ihre App gezogen werden.