Dieser Artikel zeigt Ihnen, was Vite mit der Anfrage des Browsers macht

Funktionsprinzip:

• type="module" ES-Modul native Unterstützung in Browsern. Wenn der Browser type="module" unterstützt, können wir es modular auf es6-Basis schreiben. Der Browser sendet eine weitere HTTP-Anfrage für die zu importierende Datei und sendet sie dann an den Server. Während der Entwicklungsphase ist keine Verpackung erforderlich
• Vorgefertigte Abhängigkeiten von Drittanbietern
• Starten Sie einen Entwicklungsserver zur Verarbeitung von Ressourcenanforderungen

Ein Bild erklärt das Prinzip von Vite:

Was macht der Browser?

Hostdatei index.html

<script Typ="Modul" src="/src/main.js"></script>

Nachdem der Browser die Ressourcen in der Hostdatei erhalten hat, stellt er fest, dass er die Datei main.js erneut anfordern muss. Eine Ressourcenanforderung für main.js wird erneut an den Server gesendet.

Haupt-JS

Im Wesentlichen ist festzustellen, dass der Browser erneut Ressourcenanforderungen für die beiden Dateien vue.js?v=d253a66c und App.vue?t=1637479953836 initiiert.

Der Server kompiliert den Inhalt in App.vue und gibt ihn an den Browser zurück. Wie in der folgenden Abbildung gezeigt, werden das Logobild und der Text in einen statischen Knoten von _hoisted_ kompiliert.

Aus dem Anforderungsheader können wir auch erkennen, dass die SFC-Datei zu einer JS-Datei geworden ist, die vom Browser erkannt werden kann (die Datei app.vue muss Skriptinhalte enthalten, um in JS kompiliert zu werden). Für den Browser wird ein Stück JS-Code ausgeführt.

Andere nackte Module

Wenn in der Vue-Abhängigkeit andere Abhängigkeiten vorhanden sind, initiiert der Browser dennoch erneut eine Ressourcenanforderung, um die entsprechenden Ressourcen zu erhalten.

Erfahren Sie mehr über Vorverpackung

Zum Laden von Abhängigkeiten von Drittanbietern (nackte Module) verpackt vite diese im Voraus und legt sie unter node_modules/.vite ab. Laden Sie beim Starten des Projekts die Datei direkt von diesem Pfad herunter.

Aus der obigen Abbildung können wir erkennen, dass sich der Pfad ändert, wenn das nackte Modul eingeführt wird.

Was macht der Server?

Zusammengefasst: Der Server verarbeitet die Dateien mit speziellen Suffixen und gibt sie zur Anzeige an das Frontend zurück.

Wir können Vites devServe simulieren und mithilfe der Koa-Middleware einen lokalen Dienst starten.

//Abhängigkeiten einführen const Koa = require('koa')
const app = new Koa()
const fs = erfordern('fs')
const Pfad = require('Pfad')
const compilerSfc = erfordern('@vue/compiler-sfc')
const compilerDom = erfordern('@vue/compiler-dom')

app.use(async (ctx) => {
 const { url, Abfrage } = ctx.request
 //Schreiben Sie hier den gesamten Code zur Verarbeitung der angeforderten Ressourcen})
app.listen(3001, () => {
  console.log('dyVite starten!!')
})

Homepage-Index anfordern.html

 wenn (url === '/') {
    const p = path.join(__dirname, './index.html') // absoluter Pfad // Homepage ctx.type = 'text/html'
    ctx.body = fs.readFileSync(p, 'utf8')
  }

Wenn Sie sich das Bild oben ansehen, wissen Sie, dass unsere Hostdatei erfolgreich angefordert wurde. Es ist lediglich so, dass der Browser eine weitere Anfrage für die Datei main.js an den Server sendet. Zu diesem Zeitpunkt müssen wir auch die Datei main.js beurteilen und verarbeiten.

Fordern Sie Dateien mit der Endung .js an

Nachdem wir uns mit der oben beschriebenen Situation befasst haben, emmmmm. . . Es wurde festgestellt, dass im Main noch zahlreiche andere Ressourcenanforderungen vorhanden waren.

Grundlegende js-Datei

Hauptdatei:

console.log(1)

Verarbeitungshaupt:

sonst wenn (url.endsWith('.js')) {
   // Auf JS-Anfrage antworten const p = path.join(__dirname, url)
   ctx.type = "Text/Javascript"
   ctx.body = rewriteImport(fs.readFileSync(p, 'utf8')) // Abhängige Funktionen verarbeiten}

Behandeln Sie die Abhängigkeiten im Haupt

Glauben Sie, dass es im Main nur einen Ausgang gibt? Zu naiv. Kann das bewältigt werden?

Hauptdatei:

importiere { createApp, h } von 'vue'
createApp({ render: () => h('div', 'hallo dyVite!') }).mount('#app')

ähm. . . Es sollte möglich sein!

Wir können die in main importierte Adresse in eine relative Adresse umwandeln.

Fügen Sie /@modules/ zum reinen Modulpfad hinzu. Identifizieren Sie dann die Dateien in /@modules/ (bloße Moduldateien).

// Wandelt die lesbare Dateiadresse in eine relative Adresse um // Regelmäßiges Ersetzen schreibt den Import in eine relative Adresse um // import { createApp } from 'vue' => import { createApp } from '/@modules/vue'
Funktion rewriteImport(Inhalt) {
  returniere Inhalt.Ersetzen(/ von ['|"](.*)['|"]/g, Funktion (s0, s1) {
    // s0 gleicht den String ab, s1 gruppiert den Inhalt // Ist es ein relativer Pfad if (s1.startsWith('./') || s1.startsWith('/') || s1.startsWith('../')) {
      // Kehren Sie direkt zurück, um s0 zurückzugeben
    } anders {
      gibt `von '/@modules/${s1}' zurück`
    }
  })
}

Für Abhängigkeiten von Drittanbietern verwendet vite vorgefertigte Anfragen, um interne Ressourcen unter seinem eigenen Server/node_modules/.vite/ anzufordern.

Wir können es etwas vereinfachen und die entsprechenden Ressourcen über den Abhängigkeitsnamen von node_modules auf dem Client abrufen.

  sonst wenn (url.startsWith('/@modules/')) {
    // Laden von Einzelmodulen const moduleName = url.replace('/@modules/', '')
    const pre![1637477009328](imgs/1637477009328.png)![1637477009368](imgs/1637477009368.png)'s Adresse const module = require(prefix + '/package.json').module
    const filePath = path.join(prefix, module) // Adresse der zu ladenden Datei abrufen // Zugehörige Abhängigkeiten lesen const ret = fs.readFileSync(filePath, 'utf8')
    ctx.type = "Text/Javascript"
    ctx.body = rewriteImport(ret) //Es kann Abhängigkeiten innerhalb der Abhängigkeit geben, daher ist Rekursion erforderlich}

Beim Rendern im Main wird der folgende Fehler gemeldet:

Die Dateien, die wir laden, sind alle vom Server ausgeführte Bibliotheken. Darin kann Code für die Knotenumgebung generiert werden, daher müssen wir die Umgebungsvariablen beurteilen. Wenn Sie entwickeln, werden einige Warnmeldungen ausgegeben, es werden jedoch keine Warnmeldungen auf dem Front-End angezeigt. Also müssen wir es simulieren und dem Browser unsere aktuelle Umgebung mitteilen.

Fügen Sie Prozessumgebungsvariablen zu HTML hinzu.

  <Skript>
   Fenster.Prozess = { Umgebung: { NODE_ENV: 'dev' } }
  </Skript>

An diesem Punkt wird die Hauptdatei geladen.

Aber damit sind wir noch lange nicht am Ziel!

Was wir brauchen, ist ein Server, der Vue-Dateien kompilieren kann!

Verarbeiten von .vue-Dateien

main.js-Datei:

importiere { createApp, h } von 'vue'
App aus „./App.vue“ importieren
erstelleApp(App).mount('#app')

In der Vue-Datei wird es modular geladen.

Bei der Verarbeitung von Vue-Dateien müssen wir die nach .vue enthaltenen Parameter verarbeiten.

Hier vereinfachen wir und berücksichtigen nur die Vorlagen- und SFC-Fälle.

sonst wenn (url.indexOf('.vue') > -1) {
    // Vue-Datei App.vue?vue&type=style&index=0&lang.css verarbeiten
    // Vue-Inhalt lesen const p = path.join(__dirname, url.split('?')[0])
    // compilerSfc analysiert sfc, um ast zu erhalten
    const ret = compilerSfc.parse(fs.readFileSync(p, 'utf8'))
    // App.vue?type=Vorlage
    // Wenn die Anfrage nicht query.type hat, bedeutet das, dass es sich um sfc handelt
    wenn (!Abfragetyp) {
      // Internes Skript verarbeiten
      const scriptContent = ret.descriptor.script.content
      //Konvertiere das Standard-Exportkonfigurationsobjekt in eine Konstante const script = scriptContent.replace(
        'Standard exportieren',
        'const __script = ',
      )
      ctx.type = "Text/Javascript"
      ctx.body = `
  ${rewriteImport(Skript)}
  // Die Vorlagenanalyse wird in eine separate Anforderung für einen Ressourcenimport {render as __render} von '${url}?type=template' umgewandelt.
  __script.render = __render
  Standardmäßiges __Skript exportieren
`
    } sonst wenn (Abfragetyp === 'Vorlage') {
      const tpl = ret.descriptor.template.content
      // Einschließlich Rendermodul kompilieren const render = compilerDom.compile(tpl, { mode: 'module' }).code
      ctx.type = "Text/Javascript"
      ctx.body = neu schreibenImportieren(rendern)
    }
  }

Bildpfade verarbeiten

Lesen Sie direkt vom Client.

 sonst wenn (url.endsWith('.png')) {
   ctx.body = fs.readFileSync('src' + url)
  }

Zusammenfassen

Dies ist das Ende dieses Artikels darüber, was Vite mit Browseranfragen macht. Weitere Informationen zu Vite-Browseranfragen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!