웹팩으로 실제 Window 개체에 jQuery 노출

웹팩으로 실제 Window 개체에 jQuery 노출

브라우저의 개발자 콘솔 내부에서 접근 가능한 글로벌 윈도우 객체에 jQuery 객체를 노출하고 싶습니다.이제 웹팩 구성에는 다음과 같은 행이 있습니다.

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

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

window.$;
window.jQuery;

이 속성들은 정의되지 않은...

이것을 고칠 방법이 있습니까?

노출 로더를 사용해야 합니다.

npm install expose-loader --save-dev

필요할 때 이 작업을 수행할 수 있습니다.

require("expose?$!jquery");

또는 구성에서 이 작업을 수행할 수 있습니다.

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

업데이트: 웹팩 2에서는 노출 대신 노출 로더를 사용해야 합니다.

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

ProvidPlugin은 해당 가져오기를 통해 다른 소스의 기호를 대체하지만 글로벌 네임스페이스에는 기호를 표시하지 않습니다.대표적인 예로 jQuery 플러그인이 있습니다.그들 중 대부분은 그저 기대할 뿐입니다.jQuery전 세계적으로 정의될 것입니다.위드 더ProvidePlugin당신은 jQuery가 종속성(예를 들어 이전에 로드됨)이고 발생하는jQuery그들의 코드는 웹팩 원시 등가물로 대체될 것입니다.require('jquery').

심볼에 의존하는 외부 스크립트가 글로벌 네임스페이스에 있는 경우(예: 외부에서 호스팅되는 JS, 자바스크립트가 셀레늄을 호출하거나 브라우저의 콘솔에서 심볼에 단순히 액세스하는 경우) 대신 사용할 수 있습니다.

간단히 말해: ProvidPlugin은 글로벌 기호에 대한 빌드 시간 종속성을 관리하는 반면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에서 $까지 접근할 수 있습니다.

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

window.$ = window.jQuery = $

웹팩 v2 업데이트

매트 데릭의 설명에 따라 노출 로더를 설치합니다.

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

(노출-loader 문서에서)

나의 경우는

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

웹팩 v2 업데이트

웹팩 5 업그레이드 후 이 경고가 발생할 수 있습니다.

[DEP_WEBPACK_RULE_LOADER_OPTIONS_STRING] DeprecationWarning: Using a string as loader options is deprecated (ruleSet[1].rules[7].use[0].options)

를 만 하면 됩니다.options

options: {
 exposes: ["$", "jQuery"],
}

다음과 같이 나타납니다.

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

언급URL : https://stackoverflow.com/questions/29080148/expose-jquery-to-real-window-object-with-webpack