Implementieren Sie dynamisch importierte Dateien im Webpack

Jetzt werde ich Ihnen eine Methode zum dynamischen Importieren von Dateien unter Webpack vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Als Sie anfingen, Webpack zu verwenden, hatten viele Leute möglicherweise die Idee, einen statischen Zeichenfolgenpfad zu schreiben, sondern eine flexiblere Methode zu verwenden, z. B. die Definition einer Variablen Welche Datei ist aufgrund der spezifischen Betriebsbedingungen erforderlich?

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

Zu dieser Zeit wurde Vue-Router zur Entwicklung eines Verwaltungssystems verwendet. Das Verwaltungssystem selbst verfügte über ein Verzeichnisarray, und Vue-Router benötigte auch ein Routenkonfigurationsarray, und die beiden entsprachen 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)), &#39;demo&#39;)
 });
}

Es ist ungefähr das Gleiche wie oben. Ich habe den Quellcode nicht behalten Damals habe ich ein Beispiel von Hand geschrieben und dabei einige mögliche Syntaxfehler ignoriert.

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 Dateien für Webpack 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 Übergabe 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 während 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 Beispiel oben 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
 });
}

Diese Lösung ist hauptsächlich für unser Beispiel gedacht, kann aber natürlich auch eine Inspiration für andere Situationen sein.

Aber schließlich ist dies eine Kompromisslösung. Wir müssen eines verstehen: Während der Vorkompilierungsphase muss das Webpack klar wissen, welche Dateien importiert werden müssen, sonst ist keine Lösung möglich.

Übrigens gibt es im Internet auch ein Sprichwort: „require(path)“ Solange der Pfad keine reine Variable ist, wie „require('./root/' + path“), kann das so sein so kombiniert? Ich habe es hier in der Funktion require.ensure versucht, aber es funktioniert nicht. Vielleicht benutze ich es falsch.

Eine weitere Sache: Bei der Übergabe von Komponentenobjekten scheint es einige Probleme bei der Übergabe über Dateien hinweg zu geben. Ich habe das Verzeichnis-Array, das Routen-Array und den Parsing-Prozess jedenfalls in einer Datei geschrieben. Möglicherweise ist es ein Problem, relative Pfade zum Parsen in verschiedenen Dateien zu verwenden. Sie müssen bei der Verwendung darauf achten.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Verwenden der Swiper-Komponente in Vue2.0 zum Implementieren eines Karussells (ausführliches Tutorial)

Informationen zur Verwendung von Compass in Vue spezifische Methode?

Wie deaktiviere ich die Caching-Funktion von Vue-berechneten Eigenschaften? Was sind die spezifischen Schritte?

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