Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Menguruskan Ketergantungan Plugin jQuery dengan Webpack dengan Berkesan?

Bagaimana untuk Menguruskan Ketergantungan Plugin jQuery dengan Webpack dengan Berkesan?

Mary-Kate Olsen
Lepaskan: 2024-12-04 13:35:12
asal
228 orang telah melayarinya

How to Effectively Manage jQuery Plugin Dependencies with Webpack?

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"
    })
]
Salin selepas log masuk

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"
        }
    ]
}
Salin selepas log masuk

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"
        }
    ]
}
Salin selepas log masuk

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$/
    ]
}
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan