JQuery'yi Webpack ile gerçek Pencere nesnesine maruz bırakın

111

JQuery nesnesini, tarayıcıdaki geliştirici konsolundan erişilebilen genel pencere nesnesine göstermek istiyorum. Şimdi web paketi yapılandırmamda aşağıdaki satırlar var:

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

Bu satırlar jQuery tanımlarını web paketi modüllerimdeki her dosyaya ekler. Ancak projeyi oluşturduğumda ve geliştirici konsolunda jQuery'ye şu şekilde erişmeye çalıştığımda:

window.$;
window.jQuery;

bu özelliklerin tanımsız olduğunu söylüyor ...

Bunu düzeltmenin bir yolu var mı?

javascript jquery webpack

— ferbolg
kaynak

1

Ben de ayarlayabilir miyim this: 'window'? Birçok kütüphane thisdeğişkeni Pencere nesnesi olarak kabul

— ettiğinden

129

Ekspoz yükleyiciyi kullanmanız gerekir .

npm install expose-loader --save-dev

Bunu gerek duyduğunuzda yapabilirsiniz:

require("expose?$!jquery");

veya bunu yapılandırmanızda yapabilirsiniz:

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

GÜNCELLEME : As WebPack 2, kullanmak gerekir maruz yükleyici yerine açığa :

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

— Matt Derrick
kaynak

11

ProvidePluginÜçüncü taraf kütüphaneler global değişkenin varlığına itimat nerede öncelikle durumlarda kullanılır olmalıdır.

— Johannes Ewald

Yanlış bir varsayımda bulundum, sorunun çevrimiçi olarak çokça gördüğüm 'tembel' amaçlar için sağlama eklentisini kullandığı varsayımına girdim ama

— Matt Derrick

8

Tam olarak aradığım şey buydu ve sadece daha fazlasını eklemek için, yükleyiciler için bunu tek satırda da yapabilirsiniz:{test: /jquery\.js$/, loader: 'expose?jQuery!expose?$'}

— Fernando

8

İşe yarayan ilk komut dosyasını ekleyemez $ = require('jquery'); window.jQuery = $; window.$ = $;misin? (gerek yok expose-loader)

— herman

1

Göre maruz yükleyici GitHub sayfasında webpack 2 sözdizimi aşağıdaki gibidir:

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

. Bu jQuery'nin açığa çıkarılmasının tek yolu ve yeni module.rules sözdizimini kullanıyor.

— Gavin Sutherland

84

ProvidePlugin, ilgili içe aktarma yoluyla başka bir kaynaktaki bir sembolü değiştirir, ancak sembolü genel ad alanında göstermez. Klasik bir örnek jQuery eklentileridir. Çoğu sadece jQueryküresel olarak tanımlanmayı bekliyor . İle, jQuery'nin ProvidePluginbir bağımlılık olduğundan (örneğin, daha önce yüklenmiş olduğundan) emin olurdunuz jQueryve kodlarında oluşumu , webpack ham eşdeğeri ile değiştirilir require('jquery').

Küresel ad alanında olması için sembole dayanan harici komut dosyalarınız varsa (örneğin, harici olarak barındırılan bir JS, Javascript Selenium'da çağrılar veya tarayıcı konsolundaki sembole erişme gibi), expose-loaderbunun yerine kullanmak istersiniz .

Kısaca: ProvidePlugin, genel sembollere derleme expose-loaderzamanı bağımlılıklarını yönetirken, çalışma zamanı bağımlılıklarını global sembollere yönetir.

— Joscha
kaynak

2

Açıklama için teşekkürler

— Foton

Resmi belgelerden web paketi ile ProvidePlugin örneği: webpack.js.org/plugins/provide-plugin/#usage-jquery

— James Gentes

33

Görünüşe göre windownesne tüm modüllerde açığa çıkıyor.

Neden sadece içeri aktar / zorunlu tutmuyorsun JQueryve koymuyorsun:

window.$ = window.JQuery = JQuery;

window.JQueryGerekli modülde veya kullanıldığı modülde kullanan herhangi bir modülü gerektirmeden / içe aktarmadan önce bunun gerçekleştiğinden emin olmanız gerekir .

— mhess
kaynak

Yeni bir bağımlılık eklemeden en kolay çözüm. Teşekkürler!

— fatihpense

Bu, değişkeni kullanan diğer iç içe modüllerde çalışmaz, sadece 'tanımlanmamış'

— aboutqx

4

Kullanırken Eh çalıştığını requiresüre değilimport

— aboutqx

@aboutqx Ne demek istediğinizden emin değilim. Cevabım, JQuery'nin zaten içe aktarıldığını / gerekli olduğunu ve adlı bir değişkene atandığını varsaydı JQuery.

— mhess

2

@mhess'i kullandığınızda importhata alabilirsiniz, çünkü importdosyalar dosyanın en üstüne sıralanır ve requireyerleştirildikleri yerde kalırlar. Bu nedenle, çalışma sırası yalnızca importpencere farklılığı ayarlanmadığında değişir.

— yaklaşık .qx

16

Bu her zaman benim için çalıştı. web paketi 3 dahil window.$ = window.jQuery = require("jquery");

— SharpCoder
kaynak

2

en iyi çözüm! 2018

— waza123

6

Yukarıdakilerin hiçbiri benim için işe yaramadı. (ve expose-loader sözdizimini gerçekten sevmiyorum). Yerine,

Webpack.config.js'ye ekledim:

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

Tüm modüllerin jQuery üzerinden $.

Aşağıdakileri web paketi ile birlikte gelen modüllerinizden herhangi birine ekleyerek pencereye açabilirsiniz:

window.$ = window.jQuery = $

— Antoine Vo
kaynak

1

Bu, perde arkasında web paketi akışını kullanarak benim için çalıştı

— klewis

1

Webpack v2 güncellemesi

Açık yükleyiciyi Matt Derrick tarafından açıklandığı gibi kurun :

npm install expose-loader --save-dev

Ardından aşağıdaki parçacığı içeriğinize ekleyin webpack.config.js:

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

( açığa çıkarma yükleyici belgelerinden )

— Cologne_Muc
kaynak

Artık bunu Webpack'in herhangi bir sürümünde çalıştıramıyorum. Değil emin ne değişti ama jQuery tek yolu veya $ tanınması yapmaktırwindow.jQuery = require('jquery');

— trpt4him

0

Benim durumumda çalışır

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

— FeDev
kaynak