React JS und ein Browserify-Workflow (Teil 1)

Dieser Artikel bietet Ihnen einen detaillierten Workflow zum Erstellen einer produktionsbereiten ReactJS-Anwendung. Es wurde ursprünglich auf Codementor Christian Alfonis gepostet bloggen.


Ich habe mit gearbeitet Reagiere JS für ein paar Tage und ich muss sagen, ich bin beeindruckt. Man kann es nicht wirklich mit kompletten Frameworks vergleichen Winkel JS oder Mensch JS , ist aber im gleichen Zusammenhang erwähnenswert. Ein vollständiges Framework erhöht Ihre Entwicklungsgeschwindigkeit und ist ein Traum, wenn es um Prototyping geht, aber das Erstellen einer leistungsstarken Webanwendung ist einfacher, wenn Sie jeden Teil kontrollieren. Mehr dazu in einem späteren Beitrag. Lassen Sie uns darauf eingehen, wie ich einen idealen Weg gefunden habe, um mit React JS zu arbeiten.

Aktualisieren: Ich habe die Boilerplate mit besseren Tests und einer besseren Handhabung von Abhängigkeiten aktualisiert. Habe hier darüber geschrieben, React JS und ein Browserify-Workflow, TEIL 2.

Das Problem

Ich schätze wirklich nicht die Einfachheit der Beispiele, die wahrscheinlich auf allen Bibliotheks-/Framework-Sites gezeigt werden. Niemand baut eine Anwendung im globalen Umfang, niemand baut eine Anwendung in einer einzigen Datei und jeder möchte seine Codeproduktion bereit machen. Das Reagiere JS site ist da nicht anders und es hat mich einige Zeit gekostet, einen guten Workflow zu erstellen. Das habe ich gebraucht:

  • Schreiben Sie JSX (The React JS Javascript Format) und wandeln Sie es spontan in reguläres Javascript um
  • Schreiben Sie meinen Code in einem Modulmuster
  • Verwenden Sie das Chrome-Entwicklungstool React JS
  • Bündeln Sie mein Javascript und verwenden Sie Quellkarten zum Debuggen
  • Führen Sie andere Aufgaben bei Dateiänderungen aus, wie CSS concat usw.
  • Es muss extrem schnell gehen

Dieser Beitrag wird jeden Schritt durchgehen, den ich getan habe, um eine Lösung zu finden. Wenn Sie nur die Lösung wollen, springen Sie weiter zur Lösung unten.

Erster Versuch

Meine erste Herausforderung bestand also darin, die JSX-Transformation im Handumdrehen zu lösen. Mit Blick auf die JS-Leitfaden reagieren Ich fand schnell heraus, dass das einzige, was ich brauchte, darin bestand, ein zusätzliches Skript-Tag in meinen HTML-Code aufzunehmen. Es löst mein Problem, aber es ist nicht das, wonach ich suche. Das zusätzliche Skript-Tag ist nicht etwas, das Sie in die Produktion aufnehmen möchten, daher müsste ich meine Dateien, die JSX enthalten, vorab transformieren.

Zweiter Versuch

Als die JS-Leitfaden reagieren Staaten, können Sie die installieren Reaktionswerkzeuge global und verwenden Sie ein Befehlszeilentool, um Dateien zu überwachen und zu konvertieren. Es löst mein Problem, aber es transformiert jede einzelne Datei und legt sie in einem anderen Ordner ab. Dadurch entsteht eine chaotische Projektstruktur. Ich musste meine Strategie ändern! Ich beschloss, mir stattdessen einige Modul-Tools anzusehen, die müssten sowieso die Transformation von JSX unterstützen.

Dritter Versuch

Habe schon einiges an Erfahrung mit benötigt Ich dachte, das wäre eine gute Wette, aber es wurde komplexer, als ich anfangs dachte. An diesem Plugin wurde großartige Arbeit geleistet: jsx-requirejs-plugin, aber Sie erhalten zusätzliche Abhängigkeiten wie das „Text“-Plugin für requirejs und Sie müssen eine modifizierte Version des „JSXTransformer“ verwenden, was sich nicht gut anfühlt. Es gab auch ein Problem mit dem Bündeln des gesamten Projekts bei jeder Dateiänderung, es war zu langsam.

Vierter Versuch

Ich persönlich habe es nie versucht browserify vorher, aber mir gingen die Optionen aus. Es stellt sich heraus, dass Browserify ziemlich großartig ist, es ermöglicht es, Knotensyntax in Ihre Javascript-Dateien zu schreiben. Das Ergebnis davon ist, dass Sie Module und die Möglichkeit erhalten, Ihre JSX-Dateien in Node wiederzuverwenden. Das ist eine sehr gute Sache, weil Reagiere JS ermöglicht das serverseitige Kompilieren von HTML und das Senden der Zeichenfolge an den Client zur weiteren Verarbeitung durch die clientseitige Version der Bibliothek.

Was auch gut ist browserify ist, dass Sie ein Plugin aufgerufen haben beobachten Dadurch wird Ihr Projekt zwischengespeichert und auf Änderungen überwacht, wobei nur die erforderliche Neubündelung bei Aktualisierungen durchgeführt wird. Es ist blitzschnell! Da bin ich es gewohnt Grunzen Ich habe versucht, die zu verwenden grunt-browserify und grunt-watchify Aufgaben. Dies funktionierte ganz gut, obwohl ich das Sourcemapping nicht zum Laufen bringen konnte. Aber ein noch größeres Problem war, dass ich nicht nur die Javascript-Dateien auf Änderungen überwachen musste, sondern auch meine CSS-Dateien verketten musste.

Nach einiger Recherche fand ich eine Grunzen-laufen Aufgabe, die es mir ermöglichen würde, zwei parallele Überwachungsaufgaben auszuführen. Dies funktionierte, aber es war langsam. Und ich konnte mein Sourcemapping immer noch nicht zum Laufen bringen.

Fünfter Versuch

Also so wie ich es benutzt habe Grunzen war zu langsam, was ist Schluck? Jetzt Schluck ist ein Build-Tool wie Grunzen nur dass der Prozess gestreamt wird, sodass Sie den Buildprozess im Arbeitsspeicher manipulieren können, anstatt temporäre Dateien zu erstellen, die vom nächsten Schritt im Buildprozess übernommen werden.

Suchen Sie im Internet nach einer Lösung für Schluck ich schlage Dies Post auf Stackoverflow. Es zeigt mehrere Lösungen für dasselbe Problem und weit unten fand ich ein Beispiel, das auch die Transformation von JSX mit behandelte reagieren , aber es gab einige Schritte, die ich nicht verstand. Warum braucht das alles Zeug? Und warum ist eine bestimmte Datei „react.js“ erforderlich? Es fühlt sich ein bisschen hackig an. Es gab mir auch einen Fehler, als ich es im Browser ausführte.

Dies führte mich zur Verwendung Schluck-Browserify was wunderbar funktioniert hat. Aber was ist mit der beobachten Teil? Auf der Suche nach Schluck-watchify es heißt: “experimentell”. Das fühlt sich nicht richtig an, also wie könnte ich dieses Zeug zum Laufen bringen? Bei einer erneuten Suche im Internet fand ich die folgende Aussage: „gulp-browserify has been blacklisted“. DOH!, was nun?

Sechster Versuch

Manchmal muss man es einfach von Grund auf neu machen. Mit dem, was ich bisher erlebt hatte, baute ich meinen eigenen Build-Prozess mit der browserify , beobachten und reagieren npm-Module. Ich war froh, das zu sehen Schluck behandelte auch mein CSS für eine Aufgabe und das beobachten Aufgabe parallel ohne Probleme.

Die Lösung

So ist also mein gulpfile.js Datei sieht so aus:

var gulp = require('gulp');
var source = require('vinyl-source-stream'); 
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify'); 
var concat = require('gulp-concat');
 
gulp.task('browserify', function() {
    var bundler = browserify({
        entries: ['./app/main.js'], 
        transform: [reactify], 
        debug: true, 
        cache: {}, packageCache: {}, fullPaths: true 
    });
    var watcher  = watchify(bundler);

    return watcher
    .on('update', function () { 
        var updateStart = Date.now();
        console.log('Updating!');
        watcher.bundle() 
        .pipe(source('main.js'))
    
        .pipe(gulp.dest('./build/'));
        console.log('Updated!', (Date.now() - updateStart) + 'ms');
    })
    .bundle() 
    .pipe(source('main.js'))
    .pipe(gulp.dest('./build/'));
});


gulp.task('css', function () {
    gulp.watch('styles/**/*.css', function () {
        return gulp.src('styles/**/*.css')
        .pipe(concat('main.css'))
        .pipe(gulp.dest('build/'));
    });
});


gulp.task('default', ['browserify', 'css']);

Also zusammenfassend:

  • Schreiben Sie JSX und wandeln Sie es spontan in reguläres Javascript um (GELÖST)
  • Schreiben Sie meinen Code in einem Modulmuster (GELÖST)
  • Verwenden Sie das Chrome-Entwicklungstool React JS
  • Bündeln Sie mein Javascript und verwenden Sie Quellkarten zum Debuggen (GELÖST)
  • Führen Sie andere Aufgaben bei Dateiänderungen aus, wie CSS concat usw. (GELÖST)
  • Es muss extrem schnell gehen (GELÖST)

Was ist mit den REACT DEV-TOOLS?

Das DEV-TOOLS reagieren benötigt zum Auslösen eine Instanz der React JS-Bibliothek im globalen Bereich. Um dies zu beheben, müssen Sie es einfach zu Ihrer hinzufügen main.js Datei.



var React = require('react');



window.React = React; 

var App = require('./App.jsx');
React.renderComponent(<App/>, document.body);

Das war also meine Reise. Ich hoffe wirklich, dass die Leute bei Facebook ein Beispiel dafür auf der React JS-Site veröffentlichen werden. React JS ist wirklich großartig und es ist sehr traurig, wenn Leute es weglassen, weil es so mühsam ist, einen guten Workflow einzurichten. Bis dahin können Sie gerne eine von mir erstellte Anwendungs-Boilerplate verwenden, die auch das Testen übernimmt: reagieren-app-Boilerplate.

Vielen Dank für das Anhören meiner Geschichte und viel Spaß damit Reagiere JS!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *