Les problèmes de chemin d'importation du module peuvent-ils être résolus lors de la compilation du Webpack ?
P粉231079976
P粉231079976 2023-08-26 18:08:57
0
1
457

Je souhaite créer une version qui inclut uniquement des composants spécifiques dans le bundle en fonction de variables d'environnement.

Par exemple, lorsque j'importe le composant comme ceci :

importer le Module1 depuis '@/components/Module1'

Je souhaite que le chemin soit réellement transformé pour que l'importation ressemble à ceci :

importer le module1 depuis '@/components/brands/' + process.env.APP_BRAND + 'Module1'

Maintenant, je ne souhaite pas faire cela pour toutes les importations, mais uniquement pour des importations spécifiques (par exemple, des modules avec des versions de marque), alors je souhaite peut-être ajouter au chemin d'importation quelque chose comme !brand ! , qui sera l'indicateur pour appliquer la transformation de chemin. Par conséquent, la logique ci-dessus ne doit être exécutée que pour les chemins d'importation suivants :

importer le module1 depuis '!brand!@/components/Module1'

Si process.env.APP_BRAND est faux, alors je souhaite simplement conserver l'importation d'origine (par exemple, supprimez simplement le préfixe !brand! du chemin ).

Le point important est donc que je souhaite que cela soit fait au moment de la construction afin que Webpack puisse analyser statiquement le module et créer une version optimisée. Est-ce faisable ? Je pense que je dois ajouter cette logique de conversion de chemin d'une manière ou d'une autre, mais comment dois-je le faire ? Dois-je créer un chargeur, un plugin ou existe-t-il une solution toute faite ?

J'utilise Webpack 5.

P粉231079976
P粉231079976

répondre à tous (1)
P粉714844743

Webpack fournit une fonction moduleresolveque vous pouvez utiliser ici. Lisez la documentationici. Par exemple, dans votre cas vous pourriez faire ceci :

const path = require('path'); module.exports = { resolve: { alias: { '@/components/Module1': path.join( __dirname, process.env.APP_BRAND ? '@/components/brands/' + process.env.APP_BRAND + 'Module1' : '@/components/Module1') } }, };

Veuillez noter qu'ici, vous devez transmettre des variables d'environnement à votre processus Webpack (alias processus Node.js) et prendre des décisions en fonction de cela. De plus, votre module de résolution doit être unchemin absolu.

    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal
    À propos de nous Clause de non-responsabilité Sitemap
    Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!