Webpack을 사용하여 jQuery를 실제 Window 개체에 노출

브라우저의 개발자 콘솔 내에서 액세스 할 수있는 전역 창 개체에 jQuery 개체를 노출하고 싶습니다. 이제 내 webpack 구성에 다음 줄이 있습니다.

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

이 줄은 내 웹팩 모듈의 각 파일에 jQuery 정의를 추가합니다. 그러나 프로젝트를 빌드하고 다음과 같이 개발자 콘솔에서 jQuery에 액세스하려고 할 때 :

window.$;
window.jQuery;

이 속성이 정의되지 않았다고합니다 ...

이 문제를 해결할 방법이 있습니까?

expose-loader 를 사용해야합니다 .

npm install expose-loader --save-dev

필요한 경우 다음 중 하나를 수행 할 수 있습니다.

require("expose?$!jquery");

또는 구성에서 다음을 수행 할 수 있습니다.

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

UPDATE :로 웹팩 2, 당신은 사용할 필요가 노출 로더를 대신 노출 :

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

ProvidePlugin은 각각의 가져 오기를 통해 다른 소스의 심볼을 대체하지만 전역 네임 스페이스의 심볼을 노출하지 않습니다. 고전적인 예는 jQuery 플러그인입니다. 대부분은 jQuery전역 적으로 정의 되기를 기대 합니다. 를 사용하면 ProvidePluginjQuery가 종속성 (예 : 이전에로드 됨)인지 확인 jQuery하고 코드에서 의 발생 이 require('jquery').

심볼에 의존하는 외부 스크립트가 전역 네임 스페이스에있는 경우 (예 : 외부에서 호스팅 된 JS, 자바 스크립트가 Selenium에서 호출하거나 단순히 브라우저의 콘솔에서 심볼에 액세스하는 경우) expose-loader대신 을 사용하고 싶습니다 .

간단히 말해서, ProvidePlugin은 전역 심볼에 대한 빌드 타임 종속성을 expose-loader관리 하는 반면은 전역 심볼에 대한 런타임 종속성을 관리합니다.

window객체가 모든 모듈에 노출 된 것 같습니다 .

그냥 가져 오기 / 요구 JQuery하고 넣지 않는 이유 :

window.$ = window.JQuery = JQuery;

window.JQuery필요한 모듈이나 사용중인 모듈에서를 사용하는 모듈을 요청 / 가져 오기 전에이 문제가 발생하는지 확인해야합니다 .

이것은 항상 나를 위해 일했습니다. 대한 포함 웹팩 3 window.$ = window.jQuery = require("jquery");

위의 어느 것도 나를 위해 일하지 않았습니다. (그리고 노출 로더 구문이 정말 마음에 들지 않습니다). 대신

webpack.config.js에 추가했습니다.

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

모든 모듈은 $를 통해 jQuery를 통해 액세스 할 수 있습니다.

webpack에 번들로 제공되는 모듈에 다음을 추가하여 창에 노출 할 수 있습니다.

window.$ = window.jQuery = $

Webpack v2 업데이트

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" }