Vor kurzem habe ich mit react.js herumgespielt und mir gefällt die Geschwindigkeit, mit der ich funktionierende UI-Komponenten entwickeln kann. Ich habe jetzt einige Komponenten erstellt und möchte sie unter verschiedenen .jsx-Dateien verteilen.
Alles, was ich gelesen habe, sagt, dass ich einen Bundler wie browserify oder webpacker benutzen sollte, wenn ich in Produktion gehe. Ich bin jedoch gegen diese Idee. Ein Teil des Grundes, den ich in Javascript entwickle, ist, weil es eine Skriptsprache ist und es keinen Compiler gibt, mit dem man herumspielen kann. Wenn ich mit Bauketten und dergleichen herumspielen wollte, würde ich wahrscheinlich nur meine Entwicklungsarbeit in c machen.
Ich mache hauptsächlich technische Werkzeuge. Dazu muss ein Werkzeug erstellt und anderen Ingenieuren und Bedienern zur Verfügung gestellt werden. Ich werde wahrscheinlich ein oder zwei Jahre lang kein Werkzeug mehr anschauen. Ich erwarte, dass wenn ich es nochmal anschauen muss oder jemand, der hinter mir her ist, darauf schauen muss, dass sie direkt in den Quellcode springen und Änderungen vornehmen können. Ich möchte nicht daran denken, wie meine Build-Umgebung im Jahr 2016 eingerichtet wurde.
Für meine spezielle Anwendung interessieren mich auch die Ladegeschwindigkeit oder die Client-Ressourcen nicht. Niemand benutzt meine Werkzeuge von einem Telefon und die Werkzeuge werden selten neu geladen.
Also, wenn Sie mich nicht davon überzeugen können, dass ich wirklich bündeln möchte, was ist der sauberste Weg, um einseitige Web-Anwendungen mit react.js-Komponenten zu erstellen, die auf mehrere .jsx-Dateien aufgeteilt sind?
UPDATE / RAFFINIERTE FRAGE / TEILBEANTWORTUNG:
Ich begann mit dem Beispiel von Schnellstart ohne NPM . Hier ist ein einfaches Beispiel für das, was ich erreichen wollte:
index.html:
%Vor%Hallo1.jsx:
%Vor%Hallo2.jsx:
%Vor% Es stellt sich heraus, dass das, was ich beim ersten Mal vermisst habe, das sehr wichtige window.Hello1 = Hello1; war. Diese Zeile macht die Funktion für den globalen Bereich verfügbar, andernfalls gibt die Anwendung den Fehler: Uncaught ReferenceError: Hello1 is not defined , weil babel standardmäßig jede Datei in ihren eigenen Bereich lädt.
Ich habe immer noch einige ungelöste Fragen. Dank einiger hilfreicher Erläuterungen, die ich hier erhalten habe, weiß ich, wie ich sie richtig befragen kann. Erstens: Gibt es einen jsx-Transcoder, der ein geringeres Gewicht hat und das variable Scoping nicht ändert?
Zweitens verwendet babel-core / browser.js in meinem Beispiel Ajax, um die .jsx-Datei zu laden und dann zu transformieren. Das bedeutet jedoch, dass es bei CORS-Scripting fehlschlägt, wenn es in einer lokalen Datei ausgeführt wird, es sei denn, ich starte Chrome mit dem Flag "--allow-files-access-from-files". Gibt es eine elegante Arbeit dafür?
Schließlich, wenn ich versuche, eine neuere Version von bable-core wie diese zu verwenden: " Ссылка ", es wird nicht ausgeführt. Stattdessen erhalte ich einen Fehler: browser.js:19824 Uncaught TypeError: Cannot read property 'keys' of undefined . Warum?
Sie müssen eine Unterscheidung treffen, denke ich, eine Sache ist der Bundler (webpack oder browserify), Werkzeuge, die die vielen Dateien, die Ihr Projekt bilden, aufnehmen und sie in einer oder mehreren Dateien zusammenfassen. Diese Werkzeuge sind nicht erforderlich, aber sie sind sehr nützlich, wenn Sie ein größeres Projekt haben.
Die andere Art von Werkzeugen, die oft involviert sind, sind Transpiler, Werkzeuge, die Ihren Code aufnehmen und sie in etwas anderes verwandeln (wie Babel). Wenn Sie einfaches JavaScript verwenden, sind sie nicht erforderlich. Wenn Sie die neue ES6-Syntax verwenden, müssen Sie Ihren Code im alten Javascript übersetzen und in jedem Browser ausführen.
Das heißt, dass keines dieser Werkzeuge benötigt wird. das React-Tutorial enthält die Dateien direkt auf der Seite und es funktioniert ohne andere Tools, es ist nicht sehr performant aber es funktioniert ohne andere Werkzeuge.
Ich schätze, um diese Tools nicht zu verwenden, müssen Sie nur reaktivieren und reagieren, bevor Sie das schließende Body-Tag Ihres HTML-Dokuments in Ihre Seite einfügen, zusammen mit all Ihren Dateien. Ich glaube, das Tutorial auf der React-Website verwendet diesen Ansatz und vermeidet die Verwendung von Werkzeugen.
Zusätzlich zu dem, was über webpack / browserify gesagt wurde.
Sie können Ihre Anwendung als eine Reihe separater Komponenten entwickeln und in der Lage sein, sie direkt auszuführen, ohne sie in einer Datei bündeln zu müssen. Um dies zu tun - bauen Sie Ihre Komponenten mit es6-Modulen und importieren / exportieren Sie sie gegebenenfalls. Solche Komponenten können von jedem genutzt werden. Das einzige, was die Benutzer Ihrer Komponenten tun sollten, ist den Modullader zu verwenden und ihn im Bootstrap der Anwendung zu starten.
Unten werde ich ein Beispiel geben mit systemjs als loader, aber es kann ebenso requiresjs oder was auch immer sein.
YourComponent.jsx:
%Vor%Es kann konsumiert werden, wenn in index.html systemjs wie folgt eingerichtet wird:
%Vor%In diesem Beispiel habe ich Bootstraping eingeschlossen und YourComponent wird tatsächlich als root verwendet, das ist natürlich nicht notwendig, wenn es Teil der übergeordneten Anwendung ist.
Hoffe, das hilft.
Tags und Links javascript reactjs browserify react-jsx bundling-and-minification