Comment gérer efficacement les dépendances du plugin jQuery avec Webpack ?

Comment gérer les dépendances du plugin jQuery dans Webpack

Lors de l'utilisation de Webpack, il est courant d'organiser le code d'application et les bibliothèques en bundles distincts. Par exemple, on peut créer un « bundle.js » pour tout le code personnalisé et un « vendors.js » pour les bibliothèques telles que jQuery et React. Cependant, des défis surviennent lors de l'intégration de plugins qui dépendent de jQuery et sont souhaités dans "vendors.js".

ProvidePlugin : injection de variable globale

Une approche consiste à utiliser le ProvidePlugin, qui injecte des globals implicites lorsqu'il rencontre des identifiants spécifiques, tels que « $ » ou « jQuery ». En configurant Webpack, on peut lui demander d'ajouter "var $" lorsqu'il rencontre "$" globalement.

Exemple :

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    })
]

imports-loader : Cette configuration de liaison

Le chargeur d'importation permet l'injection manuelle de variables. Certains modules hérités supposent la présence de « this » comme objet window, ce qui peut entrer en conflit avec les contextes CommonJS où « this » équivaut à « module.exports ». Le chargeur d'importations peut remplacer ce comportement et lier "this" à l'objet fenêtre.

Exemple :

module: {
    loaders: [
        {
            test: /[\/\]node_modules[\/\]some-module[\/\]index\.js$/,
            loader: "imports-loader?this=>window"
        }
    ]
}

imports-loader : désactivation d'AMD

Certains modules prennent en charge plusieurs styles de modules, notamment AMD et CommonJS. Cependant, ils peuvent donner la priorité à la définition et à l’emploi de méthodes d’exportation non conventionnelles. Cela peut être contourné en forçant CommonJS en définissant "define = false" avec le chargeur d'importations.

Exemple :

module: {
    loaders: [
        {
            test: /[\/\]node_modules[\/\]some-module[\/\]index\.js$/,
            loader: "imports-loader?define=>false"
        }
    ]
}

chargeur de script : Importation de scripts globaux

Si les variables globales ne sont pas un problème et que la simple exécution de scripts existants est la solution objectif, le script-loader peut être utilisé. Il exécute des modules dans un contexte global, semblable à l'utilisation d'un

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript