Comment Webpack importe dynamiquement des fichiers

Cette fois, je vais vous montrer comment webpack importe dynamiquement des fichiers. Quelles sont les précautions pour webpack importer dynamiquement des fichiers Voici un cas pratique, jetons un coup d'œil.

Lorsque vous avez commencé à utiliser Webpack, de nombreuses personnes ont peut-être eu cette idée. Lorsque require fichier, ne pouvez-vous pas écrire le chemin statique chaîne , mais c'est le cas. utilisez une méthode plus flexible, comme définir une variable pour 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 avait un tableau de répertoires, et vue-router avait également besoin d'un tableau de configuration de route, et les deux correspondaient 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)), 'demo')
 });
}

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

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 d'empaquetage, 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 pendant la phase 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 le composant objet  ? 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 de 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de l'utilisation de Babel

Jeu légendaire classique d'imitation JS

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!