Organisation eines React JS-Projekts - Single JS-Datei erstellen

Question

Ich wurde gerade mit der Reaktion begonnen. Ich ging ohne Probleme durch das Kommentarkasten-Tutorial. Das Framework gibt jedoch nicht viel / auf Anleitungen, um Ihre JS-Dateien zu organisieren oder eine einzelne Minified-JS-Datei für ein SpA zu kompilieren. Ich weiß bereits, dass das Framework flexibel ist und keinen Standard erzwingt, und ich bin sicher, dass diese Fragen wahrscheinlich für jemanden offensichtlich sind, der sich im JavaScript-Ökosystem entwickelt.

Ich würde mir vorstellen, dass der Konsens Browserify verwenden soll, und in den Dokumenten gibt es einen Link zu einem Git-Starter-Projekt:

https://github.com/petehunt/react-browserify-template < / p>

Dies ist ein guter Anfang, aber es kompiliert immer noch nur eine einzige JS-Datei "index.js". Ich las einige der Browserify-Handbooks durch, und ich dachte, ich müsste nur meine anderen Dateien erfordern (und diese Dateien müssen sich selbst exportieren).

Ich habe also index.js modifiziert, um so auszusehen:

generasacodicetagpre.

comment-box.js ist im Wesentlichen ein Hello-World-Test:

generasacodicetagpre.

Wenn ich das Startziel der React-Browserify-Template ausführen kann, scheint der Browser-Bundle.js fein zu generieren:

generasacodicetagpre.

aber wenn ich das Build-Ziel probiere

generasacodicetagpre.

... passiert nichts. Ich habe die Ausgabe von NPM an die Verbose geändert und ich erhalte Folgendes:

generasacodicetagpre.

Nach paket.json soll es eine Datei "browser-bündel.min.js" generieren, aber stattdessen bekomme ich keine Ausgabe. Ich hoffe, dass jemand das löschen kann.

Answer 1

Ich habe herausgefunden, was das Problem war. Wie ich ursprünglich erklärte, ist es wahrscheinlich offensichtlich für jemanden, der sich im JS-Ökosystem entwickelt hat :)

das package.json auf der React-Browserify-Template < / a> hat drei Skripts im Abschnitt "Skripts" mit den Tasten "Start", "Build" und "Test".

Wie ich zuvor gesagt habe, funktionierte Start mit dem Laufen:

generasacodicetagpre.

Ich habe falsch angemeldet, dass ich das Build-Skript ähnlich ausführen konnte:

generasacodicetagpre.

Es stellt sich heraus, dass ich das Build-Skript ausführen musste mit:

generasacodicetagpre.

Eine zusätzliche Zeile in der Dokumentation könnte mir stundenlang Probleme gespeichert haben: D Ich verwende diesen Ansatz jetzt, da er ziemlich etwas einfacher erscheint. Es setzt auch node_env auf die Produktion und die Verwendung von benachbarten Verwendungen, die anscheinend wichtig ist: https://github.com/ Facebook / Reaktion / Ausgaben / 1772

Eine andere Sache, einige der offiziellen Beispiele wie tobtomvc-flux Verwenden Sie den Kleinbuchstaben 'reagieren' in der erforderlichen Funktion:

generasacodicetagpre.

Ich vermute also, das ist die empfohlene Syntax (?)

Answer 2

Arbeitslösung mit Felix-Kern.HINWEIS: Dies entspricht nicht zu 100% der React-Browserify-Template, die benachteiligte, und die Produktionsflagge, um ein anderes Reaktions-Debugging zu beseitigen (hauptsächlich "Download der Reaktion von Devtools für eine bessere Entwicklungserfahrung: http://fb.me/react-devtools ", die beim Start an die Konsole gedruckt wird).

Vielleicht kann ein Mod Felix Credit für die Lösung geben?

app.js

generasacodicetagpre.

Komponenten / Kommentarkasten.js

generasacodicetagpre.

Komponenten / CommentList.js

generasacodicetagpre.