Bagaimana untuk Menguruskan Ketergantungan Plugin jQuery dengan Berkesan dalam Webpack?

Menguruskan Ketergantungan Pemalam jQuery dalam Webpack

Apabila menggunakan Webpack dalam aplikasi yang kompleks, mengurus kebergantungan boleh menjadi satu cabaran. Ini benar terutamanya untuk pemalam lama yang bergantung pada rangka kerja seperti jQuery. Dalam artikel ini, kami akan meneroka pendekatan yang berbeza untuk menyepadukan pemalam jQuery dengan lancar ke dalam projek Webpack anda.

1. Aliasing the Source Version

webpack boleh mengoptimumkan kebergantungan dengan lebih berkesan jika anda alias versi sumber modul vendor. Ini membolehkan webpack melakukan peningkatan seperti deduping.

// webpack.config.js
module.exports = {
    resolve: {
        alias: {
            jquery: "jquery/src/jquery"
        }
    }
};

2. Menyuntik Global Tersirat dengan ProvidePlugin

Modul warisan selalunya bergantung pada global seperti $, yang sangat diperlukan untuk pemalam jQuery. ProvidePlugin menyuntik global tersirat ke dalam pakej webpack anda, memastikan ketersediaannya.

var webpack = require("webpack");

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

3. Mengkonfigurasi dengan Imports-Loader

Modul tertentu mungkin bergantung pada objek tetingkap, yang menjadi bermasalah dalam konteks CommonJS. Pemuat import mengatasi kekangan ini.

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

4. Melumpuhkan AMD dengan Imports-Loader

Sesetengah modul menyokong berbilang gaya modul, termasuk AMD, CommonJS dan legasi. Pemuat import boleh melumpuhkan AMD untuk memaksa laluan CommonJS.

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

5. Termasuk Skrip Global dengan Pemuat Skrip

Jika pembolehubah global tidak menjadi kebimbangan, pemuat skrip menyediakan kaedah alternatif untuk mengimport skrip lama dalam konteks global.

6. Menggunakan noParse for Large Dist

Jika tiada versi AMD/CommonJS modul tersedia, anda boleh menandakannya sebagai noParse untuk mempercepatkan proses binaan. Walau bagaimanapun, ambil perhatian bahawa peningkatan AST menjadi tidak tersedia.

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

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