Vite führt die Implementierung virtueller Dateien ein

Hintergrund

Nach dem Upgrade von vue3 im neuen Projekt habe ich natürlich vue-cli&webpack durch vite ersetzt. Ich muss sagen, dass vite wirklich gut ist. Nicht nur die Kompilierungsgeschwindigkeit ist genau richtig, sondern es bietet auch eine bessere Unterstützung für die neuen Funktionen von vue3.

Während des Entwicklungsprozesses sind uns jedoch einige Probleme begegnet.

Nachdem ich vite-plugin-pages gesehen hatte, fiel mir plötzlich diese Schreibweise auf:

Routen aus „virtual:generated-pages“ importieren;

Tatsächlich habe ich beim Verwenden vieler Vite-Plugins festgestellt, dass in der Referenz eine solche Verwendung vorkommt:

importiere xxx von „virtual:xxx“;

Warum habe ich dieses virtual:xxx also noch nie zuvor gesehen? Dies ist offensichtlich kein Paket auf npm. Was könnte es sein?

Virtuelle Dateien importieren

Nachdem ich die Vite-Dokumentation gelesen hatte, wurde mir klar, dass dies eine Funktion zum Importieren virtueller Dateien ist. Sie kann eine virtuelle Datei zum Importieren generieren.

Diese Funktion wird im Abschnitt über die Einführung einer virtuellen Datei in der Plugin-API des Vite-Dokuments erwähnt. Sie steht im Abschnitt, der die Einführung einer virtuellen Datei unterstützt, d. h. diese Datei existiert nicht, sondern wird vorübergehend durch Code generiert.

Diese Generierung erfolgt über das Vite-Plugin, d. h. die entsprechende virtuelle Datei wird in der NodeJS-Umgebung generiert.

vite-plugin-pages wird durch diese Funktion implementiert. Während der Kompilierung durchläuft es zuerst das entsprechende Seitenverzeichnis und generiert dynamisch die entsprechende Routing-Tabelle gemäß der Verzeichnisstruktur und den Benennungsregeln für Dateinamen, wodurch die gute Interaktion zwischen der lokalen Verzeichnisstruktur und dem dynamischen Routing vervollständigt wird.

Tatsächlich gibt es in nuxt auch eine dynamische Routing-Funktion, diese verfügt jedoch nicht über eine virtuelle Einführung. Sie ändert die Webpack-Konfiguration dynamisch, bevor das Projekt gestartet wird, und verwendet definePlugin, um die Routing-Tabelle an den Front-End-Code zu übergeben.

Durch die Einführung der Funktion virtueller Dateien vermeiden wir die Notwendigkeit, die entsprechenden Daten durch Übergeben und Ändern von Konstanten an den Front-End-Code zu übergeben.

Neben der Übergabe von Konstanten kann der virtuelle Import noch mehr. Sie sollten wissen, dass er eine virtuelle JS-Datei importiert, was bedeutet, dass wir darin auch dynamisch Funktionen und Codelogik generieren können.

Beispiel

Beispielsweise können Sie die erforderlichen Dateien automatisch in den generierten Code importieren und dann eine Funktion zurückgeben, um die zuvor importierten Dateien zu verwenden. Auf diese Weise müssen wir diese Dateien bei der tatsächlichen Verwendung nicht importieren. Indem wir die in die virtuelle Datei exportierten Funktionen zurückgeben, können wir diese ursprünglich importierten Dateien direkt verwenden.

importiere a aus 'a-Modul'
importiere b aus „b-Modul“
...
importiere z aus „Z-Modul“

Konstante Module = {a,b,...,z}

exportiere Standard useModule(name){
    Rückgabemodule[Name]
}

Zuvor verwendet 👇

importiere a aus 'a-Modul'
importiere b aus „b-Modul“
...
importiere z aus 'z-Modul

A()
B()
C()

Jetzt verwenden 👇

importiere useModule von 'virtual:xxx'

const a = useModule('a')
const b = useModule('b')
const c = useModule('c')

Natürlich ist dies nur ein einfaches Beispiel. Sie können Ihrer Fantasie freien Lauf lassen und sich weitere Funktionen ausdenken.

dokumentieren

Gehen wir zurück zum Dokument und sehen wir uns an, wie die spezifischen Funktionen implementiert sind.

Das im Dokument angeführte Beispiel lautet wie folgt:

exportiere Standardfunktion myPlugin() {
  const virtualFileId = '@meine-virtuelle-Datei'  

  zurückkehren {
    Name: 'my-plugin', // Erforderlich, wird in Warnung und Fehler angezeigt resolveId(id) {
      wenn (id === virtuelleDatei-ID) {
        virtuelleDatei-ID zurückgeben
      }
    },
    laden(id) {
      wenn (id === virtuelleDatei-ID) {
        return `export const msg = "aus virtueller Datei"`
      }
    }
  }
}

Es lassen sich drei wesentliche Kernpunkte erkennen:

• virtualFileId: Der einzuführende virtuelle Dateiname
• resolveId(id): Bestimmt, ob es sich um einen virtuellen Dateinamen handelt, der aufgelöst werden muss
• load(id): gibt den Codestring der entsprechenden virtuellen Importdatei zurück

Es ist ersichtlich, dass der zurückgegebene Code als Zeichenfolge zurückgegeben wird. Wir können Vorlagenspleißen oder Vorlagenübersetzung verwenden, um die Erstellung der zurückzugebenden Codezeichenfolge zu erleichtern.

Typescript-Unterstützung

Es ist jedoch zu beachten, dass der virtuelle Dateiimport JS-Code anstelle von TS-Code zurückgibt und der Code dynamisch generiert wird. Dies bedeutet auch, dass wir während der Verwendung auf Situationen stoßen werden, in denen in TS keine Typunterstützung vorhanden ist.

Wenn Ihre Codestruktur sicher ist, können Sie die entsprechende d.ts-Definitionsdatei im Voraus generieren. Anschließend können Sie die entsprechende Definitionsdatei laden, indem Sie compilerOptions.types in tsconfig konfigurieren. Wenn die Codestruktur dynamisch ist, müssen Sie die entsprechende d.ts-Datei dynamisch generieren und in das Projekt schreiben, um sie zu implementieren.

Deklariere das Modul 'virtual:xxx' {
...
}

Zusammenfassen

Es ist ersichtlich, dass die Einführung virtueller Dateien eine sehr praktische Funktion ist. Sie ermöglicht nicht nur die Interaktion des Front-End-Codes mit der Kompilierungsumgebung, sondern generiert auch dynamisch Code zur Implementierung einiger Funktionen, deren Implementierung zuvor nicht so einfach war. Die spezifische Implementierung ist außerdem sehr einfach zu entwickeln. Sind Sie bereit, sie in Ihrem Plug-In zu verwenden?

Dies ist das Ende dieses Artikels über die Implementierung der Einführung virtueller Dateien durch Vite. Weitere Informationen zur Einführung virtueller Dateien durch Vite finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!