Client-Side Templating mit Nodejs und Mops

Question

Ich habe eine Web-App, die ich baue, die dynamische Widgets auf der Client-Seite erstellt hat. Zur Zeit benutze ich nodejs und mug als Server-seitige Templating-Bibliothek, und ich mag die Einfachheit von Mops.

Ich hätte gerne eine Reihe von kleinen Mops-Dateien auf dem Server, die die Client-Seite als Bausteine ​​verwenden kann, um das vom Benutzer gewünschte Widget zu erstellen.

Ich habe versucht, eine frühere Lösung, die hier gefunden werden: client side server side templating nodejs

jedoch diese Lösung wie viel des Guten sieht für das, was ich will. Außerdem sieht es so aus, als ob das ezel-Projekt nicht mehr gepflegt wird, es wurde in 2 Jahren nicht aktualisiert und es benutzt immer noch Jade (was npm mir viele Fehler gibt).

Ich möchte nur in der Lage sein, meine dynamischen Widgets in Mug im Browser zu konstruieren. Diese Seite scheint genau das zu haben, was ich will: https://pugjs.org/api/reference.html Speziell die pug.renderFile ('path/to/file.pug', Optionen); Funktion scheint genau das zu sein, was ich verwenden möchte, um meine Widgets dynamisch zu erstellen (der Benutzer hat alle Steuerelemente, wie die Widgets konstruiert/angezeigt werden, so dass der Browser die HTML-Ansichten dynamisch aufbauen muss)

Mein Problem ist die Abhängigkeit on: https://pugjs.org/js/pug.js Und die Notwendigkeit zu tun ("Mops") im Browser. Ich habe bereits Mug installiert als Teil meiner package.json. Gibt es einen robusteren Weg, pug.js direkt zu bekommen? Ich bin noch neu in der Webentwicklung, mein Hintergrund ist in C++/Java, daher bin ich mir nicht ganz sicher, ob die Verwendung von pug.js im Browser direkt die beste Lösung ist oder ob es eine bessere Standardlösung gibt. Die Stackoverflow-Frage, die ich gepostet habe, ist der einzige Eintrag, dem ich begegnet bin.

Answer 1

Ich recherchierte und testete eine Lösung, die ich wirklich mag. NPM hat ein cooles Paket namens pug-cli.

https://www.npmjs.com/package/pug-cli

ich modifizierte Skript mein npm Start folgendes zu tun: mich

pug -c -w --name-after-file -o public/js/views views/client/ 

Was dies erlaubt ist zu tun, um meine Client Ansichten in Put in den Ansichten/Client-Ordner zu schreiben. Im Hintergrund läuft eine Aufgabe, die Änderungen in views/client/überwacht. Bei Änderungen entspricht es .pug-Dateien aus Ansichten/Client/Ordner in Javascript und speichert es in public/js/views. Dann fügen Sie im Client-Code einfach Template.js ein und rufen Template (Parameter) in Ihrer js auf. Es gibt keine Notwendigkeit für eine pug.js auf der Client-Seite. Dies ist mit Debugging, um Debug zu deaktivieren, mit -D

Zum Beispiel, Ansichten/client/example.pug wird automatisch zu öffentlichen/js/views/exampleTemplate.js dann alles, was Sie tun müssen, in Der Client enthält diese js-Datei und ruft exampleTemplate (params) auf, um Ihre Vorlagen-Zeichenfolge zu erhalten (Sie können dies willkürlich mit verschiedenen Parametern aufrufen, um verschiedene Ansichten zu erhalten). Dies ermöglicht es mir, willkürlich/dynamisch Ansichten vom Client zu erstellen und zu konstruieren, wenn die Ansichten auf der Serverseite unbekannt sind.

Ich mag diesen Ansatz für meinen Workflow, aber ich bin offen für bessere Vorschläge.

Answer 2

Wenn Sie webpack verwenden:

https://github.com/pugjs/pug-loader und https://github.com/willyelm/pug-html-loader gute Dienste leisten.

Bei Rollup:

https://www.npmjs.com/package/rollup-plugin-pug + https://www.npmjs.com/package/rollup-plugin-pug-html scheinen gute Lösung zu sein

Bei browserify (testet derzeit, wie es funktioniert, sind wir jetzt mit nativen es6 Modulen und eigens Bündel mit Rollup experimentieren) :

https://www.npmjs.com/package/jadeify (nie versucht hat)

auch Mops-cli hat -c Schlüssel erhalten, so dass Sie nur jeden Beobachter laufen können und js-Dateien erzeugen, wie erwähnt abo Aber es scheint etwas zu einfach zu sein, da wir jetzt eine Vielzahl von Bündelungstools im Jahr 2017 haben.