Implémenter l'importation dynamique de fichiers dans le webpack

Je vais maintenant partager avec vous une méthode d'importation dynamique de fichiers sous webpack. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

Lorsque vous avez commencé à utiliser Webpack, de nombreuses personnes ont peut-être eu cette idée Lorsque vous avez besoin d'un fichier, ne pouvez-vous pas écrire un chemin de chaîne statique, mais utiliser une méthode plus flexible, comme définir une variable, déterminer ? quel fichier doit être requis en fonction des conditions de fonctionnement spécifiques !

Par exemple, l'auteur a rencontré un tel besoin.

À cette époque, vue-router était utilisé pour développer un système de gestion. Le système de gestion lui-même a un tableau de répertoires, et vue-router a également besoin d'un tableau de configuration de route, et les deux correspondent exactement. . À ce moment-là, je me demandais : puis-je simplement gérer un tableau de répertoires, puis générer dynamiquement un tableau de routes ?

J'ai donc implémenté une petite démo, comme suit :

// 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;)
 });
}

C'est à peu près la même chose que ci-dessus. code source à cette époque, j'ai donc probablement écrit un exemple à la main. Ignorez certaines erreurs de syntaxe possibles.

Lors de l'exécution de ce code, des erreurs commencent à apparaître : Dépendances critiques.

Après avoir vérifié quelques informations, j'ai à peu près compris le mécanisme de fonctionnement de webpack, et j'ai également compris le fait que : Il est impossible d'utiliser les fichiers require dynamiques de webpack.

Vous devez savoir que webpack est un outil de packaging, et le temps qu'il s'exécute est la pré-compilation. Notre idée est de déterminer quels fichiers ont besoin au moment de l'exécution. C'est évidemment non, car. de cela, webpack ne sait pas quels packages empaqueter. Par conséquent, ces fichiers ne sont pas empaquetés, donc require ne sera certainement pas requis.

Après avoir compris ce mécanisme, nous devons déterminer que passer directement le chemin pour enregistrer dynamiquement l'itinéraire est une solution impossible.

Et si vous souhaitez importer des fichiers dynamiquement ? Nous pouvons envisager des solutions courbes pour sauver le pays.

1. Déterminez le chemin requis lors de l'étape de pré-compilation.

La raison pour laquelle nous utilisons des variables dynamiques pour stocker les chaînes de chemin est simplement parce que nous voulons que le programme effectue certaines actions pour nous, comme épisser des chaînes, etc. Dans de nombreux cas, ces programmes ont le même effet lorsqu’ils sont exécutés au moment de l’exécution que lorsqu’ils sont exécutés lors de la précompilation. Par exemple, dans notre exemple ci-dessus, nous ne voulons tout simplement pas gérer manuellement deux tables. Ensuite, nous pouvons lire et écrire des fichiers lors de l'empaquetage pour effectuer dynamiquement des opérations d'analyse et écrire le tableau de routes analysé dans le fichier spécifié. Cela n’atteint-il pas l’objectif ?

2. Et si vous passiez directement l'objet composant ? Par exemple, la méthode de mise en œuvre suivante :

// 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
 });
}

Cette solution est principalement pour notre exemple, bien sûr, elle peut aussi servir d'inspiration pour d'autres situations.

Mais après tout, c'est une solution de compromis. Il faut comprendre une chose, c'est que lors de la phase de pré-compilation, webpack doit clairement savoir quels fichiers importer, sinon aucune solution ne sera réalisable.

Au fait, il existe également un dicton require(path) sur Internet. Tant que path n'est pas une variable pure, comme require('./root/' + path), peut-il l'être. combiné comme ça ? Je l'ai essayé dans la fonction require.ensure ici, mais cela n'a pas fonctionné. Peut-être que je l'utilise mal.

Encore une chose, lors du passage d'objets composants, il semble y avoir des problèmes lors du passage de fichiers. Quoi qu'il en soit, j'ai écrit le tableau de répertoires, le tableau de routes et le processus d'analyse dans un seul fichier. C'est peut-être un problème d'utilisation de chemins relatifs pour analyser différents fichiers. Vous devez faire attention lorsque vous les utilisez.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Utilisation du composant swiper dans vue2.0 pour implémenter un carrousel (tutoriel détaillé)

À propos de l'utilisation de Compass dans Vue méthode spécifique ?

Comment désactiver la fonction de mise en cache des propriétés calculées de Vue ? Quelles sont les étapes spécifiques ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!