Wie Webpack Dateien dynamisch importiert

Dieses Mal zeige ich Ihnen, wie Sie Dateien dynamisch mit Webpack importieren. Was sind die Vorsichtsmaßnahmen , damit Webpack Dateien dynamisch importiert?

Als Sie zum ersten Mal mit der Verwendung von Webpack begonnen haben, hatten viele Leute möglicherweise die Idee, dass Sie bei der Anforderung-Datei den statischen -String--Pfad nicht schreiben können, aber das ist so Verwenden Sie eine flexiblere Methode, z. B. die Definition einer -Variable , um zu bestimmen, welche Datei basierend auf den spezifischen Betriebsbedingungen erforderlich ist!

Zum Beispiel ist der Autor auf ein solches Bedürfnis gestoßen.

Damals wurde Vue-Router zur Entwicklung eines Verwaltungssystems verwendet. Das Verwaltungssystem selbst verfügt über ein Verzeichnisarray, und Vue-Router benötigt auch ein Routenkonfigurationsarray, und die beiden entsprechen genau . Damals dachte ich: Kann ich einfach ein Verzeichnis-Array verwalten und dann dynamisch ein Routen-Array generieren?

Also habe ich eine kleine Demo wie folgt implementiert:

// directory
let dir = [
 {
 name: 'a',
 path: '/a',
 componentPath: './a.vue'
 },
 { 
 ...
 }
];
let route = [];
for (let i = 0; i < dir.length; ++i) {
 let item = dir[i];
 route.push({
 path: item.path,
 component: r => require.ensure([], () => r(require(item.componentPath)), 'demo')
 });
}

Es ist ungefähr das Gleiche wie oben Quellcode zu diesem Zeitpunkt, daher habe ich wahrscheinlich ein Beispiel von Hand geschrieben. Ignorieren Sie einige mögliche Grammatikfehler.

Beim Ausführen dieses Codes treten Fehler auf: Kritische Abhängigkeiten.

Nachdem ich einige Informationen überprüft hatte, verstand ich ungefähr den Funktionsmechanismus von Webpack und verstand auch die Tatsache, dass: Es ist unmöglich, dynamische Webpack-Dateien zu verwenden.

Sie müssen wissen, dass Webpack ein Verpackungstool ist und die Zeit, in der es ausgeführt wird, vor der Kompilierung erfolgt. Unsere Idee ist es, zu bestimmen, welche Dateien zur Laufzeit benötigt werden Daher weiß Webpack nicht, welche Pakete gepackt werden sollen. Daher sind diese Dateien nicht gepackt, sodass require definitiv nicht erforderlich ist.

Nachdem wir diesen Mechanismus verstanden haben, sollten wir feststellen, dass die direkte Weitergabe des Pfads zur dynamischen Registrierung der Route eine unmögliche Lösung ist.

Was ist, wenn Sie Dateien dynamisch importieren möchten? Wir können einige kuriose Lösungen in Betracht ziehen, um das Land zu retten.

1. Bestimmen Sie den erforderlichen Pfad in der Vorkompilierungsphase.

Der Grund, warum wir dynamische Variablen zum Speichern von Pfadzeichenfolgen verwenden, liegt einfach darin, dass wir möchten, dass das Programm einige Aktionen für uns ausführt, z. B. das Zusammenfügen von Zeichenfolgen usw. In vielen Fällen haben diese Programme bei der Ausführung zur Laufzeit den gleichen Effekt wie bei der Ausführung während der Vorkompilierung. In unserem obigen Beispiel möchten wir beispielsweise einfach nicht zwei Tabellen manuell verwalten. Dann können wir beim Packen Dateien lesen und schreiben, um dynamisch Analysevorgänge durchzuführen, und das analysierte Routenarray in die angegebene Datei schreiben. Erreicht man damit nicht das Ziel?

2. Wie wäre es mit der direkten Übergabe des Komponentenobjekts ? Zum Beispiel die folgende Implementierungsmethode:

// directory
let dir = [
 {
 name: 'a',
 path: '/a',
 component: r => require.ensure([], () => r(require('./a.vue')), 'demo')
 
 },
 { 
 ...
 }
];
let route = [];
for (let i = 0; i < dir.length; ++i) {
 let item = dir[i];
 route.push({
 path: item.path,
 component: item.component
 });
}

Detaillierte Erklärung der Verwendung von Babel

JS-Imitation des klassischen legendären Spiels

Das obige ist der detaillierte Inhalt vonWie Webpack Dateien dynamisch importiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!