Bagaimana untuk Menguruskan Ketergantungan Plugin jQuery dengan Webpack dengan Berkesan?

Cara Menguruskan Ketergantungan Pemalam jQuery dalam Webpack

Apabila menggunakan webpack, adalah perkara biasa untuk menyusun kod aplikasi dan perpustakaan ke dalam berkas berasingan. Sebagai contoh, seseorang mungkin membuat "bundle.js" untuk semua kod tersuai dan "vendor.js" untuk perpustakaan seperti jQuery dan React. Walau bagaimanapun, cabaran timbul apabila memasukkan pemalam yang bergantung pada jQuery dan dikehendaki dalam "vendor.js."

ProvidePlugin: Global Variable Injection

Salah satu pendekatan ialah menggunakan ProvidePlugin, yang menyuntik global tersirat apabila menemui pengecam tertentu, seperti "$" atau "jQuery." Dengan mengkonfigurasi pek web, seseorang boleh mengarahkannya untuk menambahkan "var $" apabila menemui "$" secara global.

Contoh:

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

import-loader : Konfigurasi Mengikat ini

Pemuat import membenarkan suntikan pembolehubah manual. Sesetengah modul warisan menganggap kehadiran "ini" sebagai objek tetingkap, yang boleh bercanggah dengan konteks CommonJS di mana "ini" bersamaan dengan "module.exports." Pemuat import boleh mengatasi gelagat ini dan mengikat "ini" pada objek tetingkap.

Contoh:

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

pemuat import: AMD Menyahdaya

Modul tertentu menyokong berbilang gaya modul, termasuk AMD dan CommonJS. Walau bagaimanapun, mereka mungkin mengutamakan menentukan dan menggunakan kaedah pengeksportan yang tidak konvensional. Ini boleh dielakkan dengan memaksa CommonJS dengan menetapkan "define = false" dengan pemuat import.

Contoh:

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

pemuat skrip: Pengimportan Skrip Global

Jika pembolehubah global tidak menjadi kebimbangan dan hanya melaksanakan skrip warisan adalah objektif, pemuat skrip boleh digunakan. Ia menjalankan modul dalam konteks global, sama seperti menggunakan tag.

noParse: Unparsed Module Inclusion

Apabila modul tidak mempunyai versi AMD/CommonJS dan dist dikehendaki, ia boleh dibenderakan sebagai "noParse." Ini mengarahkan webpack untuk memasukkan modul tanpa menghuraikan, dengan itu meningkatkan masa binaan. Walau bagaimanapun, ini menyebabkan ciri seperti ProvidePlugin tidak boleh diakses.

Contoh:

module: {
    noParse: [
        /[\/\]node_modules[\/\]angular[\/\]angular\.js$/
    ]
}

Dengan memanfaatkan pendekatan ini, anda boleh mengurus kebergantungan pemalam jQuery dengan berkesan dalam konfigurasi pek web anda.

Atas ialah kandungan terperinci Bagaimana untuk Menguruskan Ketergantungan Plugin jQuery dengan Webpack dengan Berkesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!