Vue3-Kompilierungsprozess - Quellcodeanalyse

Vorwort:

Vue3 ist schon seit langem verfügbar. Vor kurzem hatte ich die Gelegenheit, Vue3 + TypeScript + Vite in einem Projekt meines Unternehmens zu verwenden, sodass ich mir in meiner Freizeit auch die Zeit nehme, den Quellcode von Vue3 zu lesen. Da ein gutes Gedächtnis nicht so gut ist wie ein schlechter Stift, habe ich mir beim Lesen des Quellcodes einige Notizen gemacht. Ich hoffe auch, einige Notizen zum Lesen des Quellcodes schreiben zu können, um jedem Schüler, der den Quellcode lesen möchte, aber möglicherweise Schwierigkeiten hat, das Verständnis zu erleichtern.

Ich habe auch ein wenig den Quellcode von Vue2.x gelesen. Seit der Rekonstruktion von Vue3 hat sich auch die Verzeichnisstruktur des Vue-Projekts stark verändert. Jedes Funktionsmodul wurde im packages abgelegt, und die Verantwortlichkeiten sind klarer, was auf einen Blick anhand des Verzeichnisnamens ersichtlich ist. Heute beginnen wir mit der Vue-Einstiegsdatei und sehen, wie eine einzelne Vue-Datei deklariert und compile-core -Kernmodul in eine Rendering-Funktion kompiliert wird.

Der Einfachheit halber und um die Länge des Artikels zu kontrollieren, werde ich die Logik, der Sie beim Lesen des Quellcodes nicht viel Aufmerksamkeit schenken müssen, ausblenden oder durch Kommentare wie /* Logik ignorieren */ ignorieren.

Persönlich mag ich es nicht, wenn beim Lesen eines Artikels zur Quellcodeanalyse gleich zu Beginn ein langer Codeabschnitt angezeigt wird, da dies Studierende, die ihn nicht gelesen haben, leicht verwirren kann. Deshalb werde ich in dieser Artikelserie versuchen, ein Flussdiagramm für die Schlüsselcodes zu zeichnen. Der Zweck ist immer noch derselbe: Er soll allen helfen, den Verständnisaufwand zu verringern und den Schülern gleichzeitig ein Flussdiagramm zur Verfügung stellen, auf das sie beim nächsten eigenständigen Lesen zurückgreifen können.

1. Interpretation der Vue-Eintragdatei

Wir beginnen mit dem Lesen unseres Quellcodes am Einstiegspunkt eines Vue-Objekts, packages/vue/index.ts . Der Code dieser Eintragsdatei ist relativ einfach und enthält nur eine Funktion compileToFunction . Der Inhalt des Funktionskörpers ist jedoch recht wichtig. Sehen wir uns daher zunächst ein Bild an, um zu verstehen, was dieser Funktionskörper genau bewirkt.

Nachdem wir uns das Flussdiagramm angesehen haben, schauen wir uns gemeinsam den Code an. Ich glaube, dass die meisten Schüler zu diesem Zeitpunkt den Code im Bild klar verstehen.

Überspringen Sie den gesamten Code und sehen Sie sich die letzten 35 Zeilen der Datei an. Die Funktion registerRuntiomCompiler wird aufgerufen und die Funktion compileToFunction wird als Parameter übergeben. Diese Codezeile entspricht dem Anfang des Flussdiagramms. compile Kompilierungsfunktion wird durch Abhängigkeitseinspritzung in runtime eingefügt. Die Abhängigkeitseinspritzung ist eine clevere Art der Entkopplung. Zu diesem Zeitpunkt ruft der Aufruf der compile zur Laufzeit die aktuelle Funktion compileToFunction auf.

Wenn Sie sich Zeile 17 im Code ansehen, wird die von compile-dom bereitgestellte compile aufgerufen und code wird aus dem Rückgabewert dekonstruiert. Dies ist das Kompilierungsergebnis, das nach der Ausführung des Compilers generiert wird. Code ist einer der Parameter des Kompilierungsergebnisses, bei dem es sich um eine Codezeichenfolge handelt. Zum Beispiel

<Vorlage>
  <div>
    Hallo Welt
  </div>
</Vorlage>

Nach dem Kompilieren dieser einfachen Vorlage lautet der vom code zurückgegebene String

const _Vue = Vue return-Funktion render(_ctx, _cache) { mit (_ctx) { const { openBlock: _openBlock, createBlock: _createBlock } = _Vue return (_openBlock(), _createBlock("div", null, "Hallo Welt")) } }

Ich werde das Geheimnis dieser magischen compile später ausführlich erklären.

Nachdem wir das Ergebnis dieser Codezeichenfolge erhalten haben, sehen wir uns den Code an. Zeile 25 deklariert eine render und übergibt die generierte Codezeichenfolge als Parameter an den new Function Funktionskonstruktor. Dies ist der vorletzte Schritt im Flussdiagramm, der die render generiert. Sie können die oben eingegebene code formatieren und feststellen, dass render eine Curry-Funktion ist, die eine Funktion zurückgibt, die die Bereichskette erweitert.

Schließlich gibt die Eingabedatei die render zurück und speichert die Renderfunktion im Cache.

In der ersten Zeile des obigen Quellcodes können wir sehen, dass die Eingabedatei ein compileCache Objekt erstellt, um die von der Funktion compileToFunction generierte render zwischenzuspeichern, template Vorlagenparameter als Cache-Schlüssel verwendet und in Zeile 11 einen if-Zweig hat, um eine Cache-Beurteilung vorzunehmen. Wenn die Vorlage zuvor zwischengespeichert wurde, wird sie nicht mehr kompiliert und render Renderfunktion im Cache wird direkt zurückgegeben, um die Leistung zu verbessern.

An diesem Punkt wurde die Eintragsdatei von package/vue/index.ts interpretiert. Ich glaube, jeder hat gesehen, dass der interessanteste Teil der Aufruf der Kompilierungsfunktion zum Kompilieren der Codezeichenfolge ist, daher werde ich als Nächstes weiter über compile Kompilierungsfunktion sprechen. Die Kompilierungsfunktion umfasst zwei Module: compile-dom und compile-core . In diesem Artikel werde ich nur die wichtigsten Prozesse erklären. Die detaillierte Analyse wird in den nachfolgenden Artikeln enthalten sein. Werfen wir einen Blick auf den laufenden Kompilierungsprozess:

2. Kompilierungsvorgang

compile gibt direkt das Ergebnis der baseCompile -Funktion zurück. Während der Ausführung generiert die baseCompile Funktion einen abstrakten AST-Syntaxbaum und ruft transform auf, um jeden AST-Knoten zu verarbeiten, z. B. um vOn, v-if, v-for und andere Anweisungen zu konvertieren. Schließlich wird der verarbeitete abstrakte AST-Syntaxbaum von der Generierfunktion verwendet, um die oben erwähnte Codezeichenfolge zu generieren und das Kompilierungsergebnis zurückzugeben. An diesem Punkt wird compile ausgeführt. Nachdem wir den allgemeinen Prozess verstanden haben, schauen wir uns den Quellcode an.

Der Quellcodepfad der compile lautet packages/compiler-dom/src/index.ts . Wir können sehen, dass im Hauptteil der compile das Verarbeitungsergebnis von baseCompile direkt zurückgegeben wird. Der Quellcodepfad von baseCompile ist packages/compiler-core/src/compile.ts . Warum heißt baseCompile so? Da compile-core das Kernmodul der Kompilierung ist, akzeptiert es externe Parameter, um die Kompilierung gemäß den Regeln abzuschließen, und Compile-Dom wird speziell für die Kompilierung in Browserszenarien verwendet. Die unter diesem Modul exportierte Kompilierungsfunktion ist die tatsächlich von der Eingabedatei empfangene Kompilierungsfunktion. Die Kompilierungsfunktion in compile-dom ist auch ein Compiler höherer Ebene als baseCompile . Wenn Vue beispielsweise in nativen Apps wie Weex auf iOS oder Android funktioniert, kann compile-dom durch die entsprechende mobile Kompilierungsbibliothek ersetzt werden.

Schauen wir uns die folgende BaseCompile-Funktion an:

Zunächst empfängt baseCompile aus der Funktionsdeklaration die Vorlage template und die vom übergeordneten High-Level-Compiler verarbeiteten options und gibt schließlich ein Kompilierungsergebnis vom Typ CodegenResult zurück.

Schnittstelle CodegenResult exportieren {
  Code: Zeichenfolge
  Präambel: Zeichenfolge
  ast: Stammknoten
  Karte?: RawSourceMap
}

Durch die Schnittstellendeklaration von CodegenResult können wir deutlich erkennen, dass das zurückgegebene Ergebnis die code , den verarbeiteten abstrakten AST-Syntaxbaum und die SourceMap enthält.

Schauen Sie sich Zeile 12 des obigen Quellcodes an, um festzustellen, ob es sich template um eine Zeichenfolge handelt. Wenn ja, wird die Zeichenfolge analysiert, andernfalls wird template direkt als AST verwendet. Tatsächlich wird der Einzeldatei-Vue-Code, den wir normalerweise schreiben, als Zeichenfolge übergeben.

Der nächste Quellcode ist Zeile 16, die die transform aufruft und Toolfunktionen wie Anweisungskonvertierung und Knotenkonvertierung übergibt, um den vom Template generierten AST zu transformieren.

Schließlich übergeben wir in Zeile 32 den zu generierenden konvertierten AST und generieren ein Rückgabeergebnis vom Typ CodegenResult .

Im Compile-Core-Modul sind die Funktionen AST-Parsing, transform , codegen , compile und parse allesamt separate kleine Module. Die interne Implementierung ist sehr ausgefeilt und wird in nachfolgenden Artikeln zum Compiler nacheinander vorgestellt.

In diesem Artikel wird der allgemeine Prozess der Kompilierung ausgehend von der Eingabedatei erläutert. Er soll jedem beim Lesen des Codes dieses Compilermoduls zu einem klaren Verständnis des Prozesses verhelfen. Mit dem Flussdiagramm wird das Lesen noch interessanter.

Dies ist das Ende dieses Artikels über den Vue3-Kompilierungsprozess – Quellcodeanalyse. Weitere relevante Inhalte zum Vue3-Kompilierungsprozess finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!