Eines Tages stieß ich beim Lesen der Vue Loader-Dokumentation auf eine interessante Neuerung in Version 15. Es handelt sich um benutzerdefinierte Blöcke , die in Einzeldateikomponenten von Vue eingebettet werden können. Das Beispiel zeigt, wie Sie direkt in der Komponente auf den Inhalt dieses Blocks zugreifen können. Zuerst schien ich dieser Gelegenheit nicht viel Wert beizumessen, aber dann dachte ich, hmm ... und wenn ich den Rücken dort stopfte, der mit diesem Stück der Vorderseite verbunden war ... Und los geht's ...
Das Sichern zu dieser Zeit (vor einem Jahr) war auf PHP . Zu Beginn habe ich mich entschlossen zu sehen, wie mein Lieblings-PhpStorm-Editor das Einfügen von PHP-Code in diesen Block handhabt. Egal wie ich es versuchte, es war keine Rede von Code-Hervorhebungen oder anderen Funktionen zur automatischen Vervollständigung. Ich denke, ich werde eine Frage zum technischen Support für JetBrains schreiben. Nach einer Weile erhielt ich eine negative Antwort über jede Möglichkeit, dies zu konfigurieren, aber sie schickten Anweisungen, wie man es für Javascript konfiguriert. Nun, ich denke okay, Sie müssen immer noch versuchen, die Idee umzusetzen. Ich musste noch nie etwas für Webpack entwickeln. Ich habe die Dokumentation für diesen Tag studiert und an den nächsten beiden Abenden Loader und das Plugin entwickelt. All dies funktionierte, aber ohne elementare Syntaxhervorhebung in benutzerdefinierten .vue-Blöcken brachte PHP-Code nur Schmerzen ...
Die Zeit verging. Nachdem ich mich langsam mit nodejs vertraut gemacht und dem Änderungsprotokoll der Änderungen in neuen Versionen gefolgt hatte, um nützliche und vorgefertigte Lösungen für mich zu finden, begann ich zu verstehen, dass ich den Knoten weiterhin verwenden werde, wenn ich wähle, worauf ich schreiben möchte. Das Ausführen mehrerer Kopien von Anwendungen auf dem Knoten und das Entladen der Last auf diesen Kopien mit ngnix ergab bessere Ergebnisse. Kürzlich bin ich zu diesem Thema zurückgekehrt und habe den Loader und das Plugin fertiggestellt.
Ich werde mit der Vorlage beginnen
Backend-Vorlage
Die Vorlage ist ein Leerzeichen, in das Backend-Teile aus benutzerdefinierten Blöcken von Vue-Dateien fallen sollten. All dies wird nach der Verarbeitung in der resultierenden Datei gespeichert. Vorlagenbeispiel:
Backend-Vorlageconst WEB_PORT = 314; const Koa = require('koa'); var Router = require('koa-router'); const app = new Koa(); var router = new Router(); app .use(router.routes()) .use(router.allowedMethods()); const body = require('koa-json-body')({ limit: '10kb' }); app.listen(WEB_PORT); app.context.db = require('../lib/db.js');
/*{{endpoints}}*/ - Hier wird der Code aus benutzerdefinierten Blöcken eingefügt
Webpack-Lader
Bootloader-Code var loaderUtils = require("loader-utils"); var path = require('path'); const id = 'gavrilow_backend_plugin'; exports.default = function (source) { this.cacheable();
Die * .vue-Dateien, die benutzerdefinierte Blöcke enthalten, gelangen in den Bootloader. Der benutzerdefinierte Blockname kann selbst festgelegt werden.
Webpack Plugin
Plugin-Code const fs = require('fs'); const util = require('util'); const readFile = util.promisify(fs.readFile); const writeFile = util.promisify(fs.writeFile); var footer_header_template; class gavrilow_backend_plugin { constructor(options) { this.options = options; this.logMess = ''; } endLog(){ this.logMess = '------ gavrilow-backend-plugin ------------------------------------------------------------------\n' +this.logMess; this.addLogMess('-------------------------------------------------------------------------------------------------'); console.log(this.logMess); this.logMess = ''; } addLogMess(mess){ this.logMess += mess+'\n'; } async prepareTemplate(){ try { if (footer_header_template === undefined) { let contents = await readFile(this.options.backend_template, "utf-8"); footer_header_template = contents.split(/^\/\*+?{{.*endpoints.*}}+?\*\/$/img); if (footer_header_template.length !== 2) { footer_header_template = undefined; this.addLogMess(' .'); this.endLog(); return false; } else return true; } else return true; } catch (err) { footer_header_template = undefined; throw err; } } apply(compiler) { compiler.hooks.emit.tapAsync( 'gavrilow_backend_plugin', (compilation, callback) => { callback(); if (this.options.backend_template === undefined || this.options.backend_template === '') { this.addLogMess(' / - ...'); this.endLog(); return; } if (this.options.backend_output === undefined || this.options.backend_output === '') { this.addLogMess(' js ...'); this.endLog(); return; } if (!compiler.gavrilow_backend_plugin) { this.addLogMess(' [ <backend>...</backend> ].'); this.endLog(); return; } (async ()=>{ try {
Das Plugin wird nach Abschluss der Projektassemblierung ausgelöst. Die Vorlage wird vorbereitet, indem sie in zwei Teile unterteilt wird: vor /*{{endpoints}}*/ und nach /*{{endpoints}}*/ Wenn das Flag zum Ändern des Arrays durch den Loader gesetzt wurde, wird das endgültige Skript aus allen verfügbaren Teilen zusammengestellt.
Wie man alles probiert
Das Projekt wurde auf Github überflutet .
Es gibt auch eine Beschreibung der Einstellungen.