แสดง jQuery กับวัตถุ Window จริงด้วย Webpack

ฉันต้องการแสดงวัตถุ jQuery กับวัตถุหน้าต่างส่วนกลางที่สามารถเข้าถึงได้ภายในคอนโซลนักพัฒนาในเบราว์เซอร์ ตอนนี้ในการกำหนดค่า webpack ของฉันฉันมีบรรทัดต่อไปนี้:

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

บรรทัดเหล่านี้จะเพิ่มนิยาม jQuery ให้กับแต่ละไฟล์ในโมดูล webpack ของฉัน แต่เมื่อฉันสร้างโครงการและพยายามเข้าถึง jQuery ในคอนโซลนักพัฒนาซอฟต์แวร์เช่นนี้:

window.$;
window.jQuery;

มันบอกว่าคุณสมบัติเหล่านี้ไม่ได้กำหนด ...

มีวิธีแก้ไขปัญหานี้หรือไม่?

คุณจำเป็นต้องใช้เปิดเผย-loader

npm install expose-loader --save-dev

คุณสามารถทำได้เมื่อต้องการ:

require("expose?$!jquery");

หรือคุณสามารถทำได้ใน config ของคุณ:

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

UPDATE : ใน webpack 2 คุณต้องใช้expose-loaderแทนexpose :

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

GivePlugin จะแทนที่สัญลักษณ์ในแหล่งอื่นผ่านการนำเข้าตามลำดับ แต่ไม่แสดงสัญลักษณ์บนเนมสเปซส่วนกลาง ตัวอย่างคลาสสิกคือปลั๊กอิน jQuery ส่วนใหญ่คาดว่าjQueryจะได้รับการกำหนดขึ้นทั่วโลก ด้วยProvidePluginคุณจะตรวจสอบให้แน่ใจว่า jQuery เป็นการพึ่งพา (เช่นโหลดมาก่อน) และการเกิดขึ้นjQueryในโค้ดของพวกเขาจะถูกแทนที่ด้วย webpack ดิบที่เทียบเท่ากับrequire('jquery').

หากคุณมีสคริปต์ภายนอกที่อาศัยสัญลักษณ์ที่จะอยู่ในเนมสเปซส่วนกลาง (เช่นสมมติว่า JS โฮสต์ภายนอก Javascript เรียกใน Selenium หรือเพียงแค่เข้าถึงสัญลักษณ์ในคอนโซลของเบราว์เซอร์) คุณต้องการใช้expose-loaderแทน

ในระยะสั้น: GivePlugin จัดการการอ้างอิงเวลาสร้างกับสัญลักษณ์ส่วนกลางในขณะที่expose-loaderจัดการการอ้างอิงรันไทม์เป็นสัญลักษณ์ส่วนกลาง

ดูเหมือนว่าwindowวัตถุจะถูกเปิดเผยในโมดูลทั้งหมด

ทำไมไม่เพียงแค่นำเข้า / ต้องการJQueryและใส่:

window.$ = window.JQuery = JQuery;

คุณจะต้องตรวจสอบให้แน่ใจว่าสิ่งนี้เกิดขึ้นก่อนที่จะต้อง / นำเข้าโมดูลใด ๆ ที่ใช้ประโยชน์window.JQueryไม่ว่าจะเป็นในโมดูลที่ต้องการหรือในโมดูลที่ใช้

สิ่งนี้ใช้ได้ผลสำหรับฉันเสมอ รวมถึงwebpack 3 window.$ = window.jQuery = require("jquery");

ข้างต้นไม่ได้ผลสำหรับฉัน (และฉันไม่ชอบไวยากรณ์ expose-loader) แทน,

ฉันเพิ่มไปที่ webpack.config.js:

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

กว่าโมดูลทั้งหมดจะเข้าถึงผ่าน jQuery ถึง $

คุณสามารถแสดงให้เห็นในหน้าต่างโดยเพิ่มสิ่งต่อไปนี้ในโมดูลใด ๆ ของคุณที่มาพร้อมกับ webpack:

window.$ = window.jQuery = $

อัปเดตสำหรับ Webpack v2.0

ติดตั้งexpose-loaderตามที่ Matt Derrick อธิบายไว้:

npm install expose-loader --save-dev

จากนั้นใส่ข้อมูลโค้ดต่อไปนี้ในwebpack.config.js:

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

(จากเอกสารexpose-loader )

ในกรณีของฉันใช้งานได้

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