Ekspos jQuery ke objek Window nyata dengan Webpack

Saya ingin mengekspos objek jQuery ke objek jendela global yang dapat diakses di dalam konsol pengembang di browser. Sekarang di konfigurasi webpack saya, saya memiliki baris berikut:

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

Baris-baris ini menambahkan definisi jQuery ke setiap file di modul webpack saya. Tetapi ketika saya membangun proyek dan mencoba mengakses jQuery di konsol pengembang seperti ini:

window.$;
window.jQuery;

dikatakan bahwa properti ini tidak ditentukan ...

Apakah ada cara untuk memperbaikinya?

Anda perlu menggunakan expose-loader .

npm install expose-loader --save-dev

Anda dapat melakukan ini saat Anda membutuhkannya:

require("expose?$!jquery");

atau Anda dapat melakukan ini di konfigurasi Anda:

loaders: [
    { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]

UPDATE : Pada webpack 2, Anda perlu menggunakan expose-loader daripada expose :

module: {
    rules: [{
        test: require.resolve('jquery'),
        use: [{
            loader: 'expose-loader',
            options: '$'
        }]
    }]
}

ProvidPlugin menggantikan simbol di sumber lain melalui impor masing-masing, tetapi tidak mengekspos simbol di namespace global. Contoh klasik adalah plugin jQuery. Kebanyakan dari mereka hanya berharap jQueryuntuk didefinisikan secara global. Dengan ProvidePluginAnda akan memastikan bahwa jQuery adalah dependensi (misalnya dimuat sebelumnya) dan kemunculan jQuerydalam kode mereka akan diganti dengan webpack mentah yang setara require('jquery').

Jika Anda memiliki skrip eksternal yang mengandalkan simbol untuk berada di namespace global (seperti misalnya JS yang dihosting secara eksternal, panggilan Javascript di Selenium atau hanya mengakses simbol di konsol browser), Anda ingin menggunakan expose-loader gantinya.

Singkatnya: ProvidPlugin mengelola dependensi waktu build ke simbol global, sedangkan dependensi waktu proses ke simbol global expose-loaderdikelola.

Sepertinya windowobjek diekspos di semua modul.

Mengapa tidak hanya mengimpor / membutuhkan JQuerydan memasukkan:

window.$ = window.JQuery = JQuery;

Anda perlu memastikan bahwa ini terjadi sebelum meminta / mengimpor modul apa pun yang digunakan window.JQuery, baik di modul yang memerlukan atau di modul tempat modul itu digunakan.

Ini selalu berhasil untuk saya. termasuk untuk webpack 3 window.$ = window.jQuery = require("jquery");

Semua hal di atas tidak berhasil untuk saya. (dan saya benar-benar tidak suka sintaks expose-loader). Sebagai gantinya,

Saya menambahkan ke webpack.config.js:

var webpack = require('webpack');
module.exports = {
   plugins: [
       new webpack.ProvidePlugin({
           $: 'jquery',
       })     
   ]
}

Dari semua modul memiliki akses melalui jQuery melalui $.

Anda dapat mengeksposnya ke jendela dengan menambahkan berikut ini ke salah satu modul Anda yang dipaketkan oleh webpack:

window.$ = window.jQuery = $

Pembaruan untuk Webpack v2

Instal expose-loader seperti yang dijelaskan oleh Matt Derrick:

npm install expose-loader --save-dev

Kemudian masukkan cuplikan berikut di Anda webpack.config.js:

module.exports = {
    entry: {
        // ...
    },
    output: {
        // ...
    },
    module: {
        loaders: [
                { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" }
        ]
    }
};

(dari dokumen expose-loader )

Dalam kasus saya berhasil

{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" }