Ich möchte sofort reservieren, dass dieser Artikel nicht für diejenigen gedacht ist, deren Hauptaktivität die Frontend-Entwicklung ist. Dieser Beitrag richtet sich an Entwickler von Backends, die dringend eine Web-Benutzeroberfläche benötigen, oder an Entwickler, die sich nur für neue Bereiche interessieren, sowie an Fullstack-Entwickler.
Kommen wir also zum Problem. Ich erinnere mich an
einen Artikel , und auch in den offenen Räumen von Habr gab es mehrere ähnliche. Sie werden alle als Comic dargestellt, aber wie sie sagen "in jedem Witz steckt ein Körnchen Wahrheit", und hier ist es nicht einmal ein bisschen ... Aber hier ist die Frage, wie nützlich all diese Rahmenbedingungen sind, werden sie benötigt?
Die Frage, die ich stellen möchte, betrifft hauptsächlich die Montage. In dieser Phase bietet die js-Community eine unglaubliche Anzahl von Tools an, deren Bedarf überhaupt nicht offensichtlich ist. Beispielsweise bietet die Community verschiedene Optionen für die Arbeit mit Modulen an, was zu dieser Zeit sinnvoll war. Derzeit wird die
Import- /
Exportspezifikation jedoch von allen modernen Browsern und sogar nicht vom Edge-Browser unterstützt. Da wir bereits erwähnt haben, dass wir keinen Grund haben, mit alten Bibliotheken zu arbeiten, werden wir uns die Import- / Exportspezifikationen ansehen. Was wir aber wirklich brauchen, ist eine Art Arbeit mit Abhängigkeiten.
Ich werde einen kleinen Exkurs machen, um die Auswahl der Technologien zu erklären, die im Beispiel für das Frontend selbst verwendet werden. Um nicht in die Vielzahl der Frameworks einzutauchen, gehen wir von einem wunderbaren
Standard aus . Also wird alles ganz einfach, es gibt kein virtuelles DOM, es gibt Webkomponenten. Dies könnte beendet werden, aber immer noch js. Wenn wir uns entscheiden,
reines js loszuwerden, müssen wir irgendwie Infrastrukturprobleme lösen, Boilerlet-Code loswerden usw. Mit anderen Worten, um Ihr Fahrrad ein bisschen zu machen ... Um dies nicht zu tun, möchte ich etwas mitnehmen, bei dem alles bereits erledigt wurde und von ausreichend hoher Qualität ist. Dementsprechend fiel meine Wahl auf
Polymer - ein Framework von Google, das Webkomponenten in den Standard brachte.
Zurück zur Montage. Viele von Ihnen (auf jeden Fall Java-Entwickler) sind an ein Tool wie Maven und Gradle gewöhnt, und Sie haben wahrscheinlich herausgefunden, dass sie bei der Ressourcenmanipulation hervorragende Arbeit leisten (für Maven ist dies natürlich etwas schlimmer, aber für Gradle gibt es überhaupt keine Probleme alles). Die Frontend-Community bietet uns an, npm zu nehmen, für die NodeJs benötigt werden, aber das reicht nicht aus, Webpack ist auch oben. Und sie müssen immer noch verstehen und jedem Entwickler mitteilen. Ähm ... Ich möchte nur das Repository entleeren, gradlew erstellen und anfangen zu arbeiten, also lasst uns beim üblichen Gradle anhalten.
Natürlich können wir auf npm überhaupt nicht verzichten, zumindest benötigen wir ein Repository, aus dem js-Bibliotheken abgerufen werden können, und npm stellt es bereit, aber das Dienstprogramm ist optional. Sie können einige gute Lösungen wie
diese finden , aber sie laden immer nodeJs herunter und führen npm-Tasks aus. Eine Option, aber ich möchte die Kommunikation mit npm minimieren, bevor ich mit dem Repository interagiere und vieles mehr. Schreiben Sie als Lösung Ihr eigenes Plugin für gradle. Obwohl das Schreiben von Plugins für gradle recht einfach ist, ist die Aufgabe aufgrund der Vielzahl von Optionen zum Festlegen von Versionen für das npm-Repository etwas komplizierter. Glücklicherweise gibt es dafür eine klare
Dokumentation .
Schreiben wir also ein Gradle-Skript, um Abhängigkeiten zu laden. Es wird von kotlin dsl verwendet, weil das Umschreiben in groovy dsl ziemlich trivial ist, aber im Gegenteil, es hätte einige Zeit gedauert, wenn es keine vorherigen Erfahrungen gegeben hätte.
repositories { mavenLocal() jcenter() } dependencies { classpath("com.github.artfable.gradle:gradle-npm-repository-plugin:0.0.3") } apply(plugin = "artfable.npm") configure<GradleNpmRepositoryExtension> { output = "$projectDir/src/libs/" dependencies = mapOf( Pair("@polymer/polymer", "3.0.5"), Pair("@polymer/app-layout", "3.0.1"), Pair("@polymer/paper-toolbar", "3.0.1"), Pair("@polymer/paper-icon-button", "3.0.1"), Pair("@polymer/iron-icons", "3.0.1"), Pair("@webcomponents/webcomponentsjs", "2.1.3") ) }
Dieses
Plugin fügt uns
npmLoad hinzu . Definieren Sie die IDE-Gruppe in einer Gruppe, damit sie gut funktioniert
tasks["npmLoad"].group = "frontend"
Großartig, Sie können versuchen, Code für unser Frontend zu schreiben. Der integrierte Intellij-Server teilt Ihnen standardmäßig mit, dass die
Methode "Nicht zulässig" versucht, Skripts über den Import zu verbinden. Um dies zu vermeiden, aktivieren Sie das Kontrollkästchen
Zulassen von Anforderungen zulassen . (In den neuesten Versionen funktioniert es ohne).
Versuchen wir jetzt zu beginnen und ... Trotzdem hat nichts funktioniert. Abhängigkeiten innerhalb der Polymerkomponenten fielen ab. Tatsache ist, dass viele js-Bibliotheken Importe mit der Erwartung einer Art Transpiler wie babel vorantreiben. Ein solcher Import sieht so aus:
import '@polymer/polymer/polymer-legacy.js';
Dieser Syntaximport ist nicht korrekt, da der Pfad für einen Browser nur mit '/', './' oder '../' beginnen sollte. Außerdem kann es in dieser Form weder als relativ noch als absolut angesehen werden, da hier die Berechnung für den Anfang des Bibliotheksverzeichnisses vom Stamm aus erfolgt. Daher müssen solche Pfade festgelegt werden, und um dies nicht selbst zu tun, können Sie ein vorbereitetes
Plug-In verwenden .
Abhängig von
classpath("com.github.artfable.gradle:gradle-js-import-fix-plugin:0.0.1")
apply(plugin = "artfable.js.import.fix") configure<GradleJsImportFixExtension> { directory = "$projectDir/src/libs" }
Die Aufgabe
jsImportFix wird
hinzugefügt, die alle Importe in Ordnung bringt.
Einfach so und ohne sich mit einem Berg neuer Werkzeuge auseinandersetzen zu müssen, können Sie eine Front zusammenstellen. Aber schauen wir uns noch einmal das Thema Stile an. Ehrlich gesagt, werden Webkomponenten das Boilerplate los, und Variablen in CSS, die bereits im Standard enthalten sind, eröffnen viele Möglichkeiten, sodass Dinge wie sass nicht mehr benötigt werden. Aber plötzlich zum Beispiel mochten Sie
Bootstrap sehr und wollten ein darauf basierendes Design erstellen.
Es ist kein Problem, ein Plug-In zu finden, um auf diesem Thema
aufzubauen .
Grundsätzlich basieren alle auf
libsass und es gibt einen Wrapper in java -
jsass . Das einzige Problem für alle (zumindest zu dem Zeitpunkt, als ich sie in Betracht gezogen habe) ist das Duplizieren abhängiger Dateien.
Ein Beispiel:
Datei a:
@import “b”; @import “c”;
_B- und _c-Dateien:
@import “d”;
Als Ergebnis erhalten wir in der Hauptdatei 2 identische Blöcke aus der _c-Datei. Sie können es ganz einfach beheben, wenn Sie den
Importer zu jsass hinzufügen, erlaubt api. Eigentlich bin ich also wieder mit meiner Entscheidung
hier (wenn es keine solchen Anforderungen gibt, ist es besser, eine andere Lösung zu verwenden).
Fügen Sie der Liste npm-Abhängigkeiten hinzu
Pair("bootstrap", "4.1.3")
Plugin-Abhängigkeit
classpath("com.github.artfable.gradle:gradle-sass-plugin:0.0.1")
apply(plugin = "artfable.sass") configure<GradleLibsassPluginExtension> { group(delegateClosureOf<GradleLibsassPluginGroup> { sourceDir = "src/sass" outputDir = "src/css" } as Closure<Any>) } tasks.create("processResources")
Die gefälschte Task processResources muss erstellt werden, wenn das Java-Plugin nicht verbunden ist (und wir brauchen es hier nicht). Dies ist natürlich ein Fehler, dann werde ich ihn definitiv beheben.
Bitte beachten Sie, dass die resultierende CSS-Datei nicht mit dem
Kopf verbunden werden darf, da sie dann innerhalb der Komponente nicht sichtbar ist, sondern direkt in der Vorlage der Komponente selbst.
Der letzte Schritt besteht darin, das Skript leicht zu ändern, um das übliche
Build- Verzeichnis mit einem vorgefertigten Projekt zu erhalten, das für prod bereitgestellt werden kann.
Der vollständige Code wurde auf github hochgeladen (Sie müssen wahrscheinlich später auf gitlab migrieren ...).
Ich hoffe, die Grundidee ist klar, und dann können Sie ganz einfach alles hinzufügen, was Sie möchten. Danke fürs Lesen.