Webpack의 "전역 변수 가져 오기"

Question

우리는 전통적인 JS 스크립트를 사용하는 사이트에 통합되는 webpack 응용 프로그램을 가지고 있으며이 스크립트는 전역 변수를 정의합니다.

우리 Webpack 응용 프로그램에서 import 이미 스크립트로 페이지에있는 일부 라이브러리를 원합니다. 동일한 코드를 두 번 다운로드하고 스크립트로 한 번 다시 webpack 번들에 삽입하는 대신 webpack에 이미 페이지에있는 라이브러리의 코드를 스크립트로 포함시키지 않고 ES import을 계속 사용할 수 있습니다. 문제의 스크립트 코드가 실제로 전역 변수에 의해 라이브러리를 사용할 수 있도록 만들었지 만, 모듈의 코드를 "가져 오기"위한 구문을 사용합니다.

Google 페이지에는 <script src="jquery.js">이 있습니다. jquery.js이 같은 가정 않습니다

window.jQuery = {}; 

그리고 웹팩에 의해 컴파일 된 우리의 코드에서

, 우리는 할 싶습니다

import jQuery from 'jquery'; 
jQuery === window.jQuery // true 

웹팩 특정 종속성을 해결하기 위해 구성 할 수있는 방법이 있습니까, 위의 예에서 "jquery"와 같은 코드를 사용하고 import 코드를 해당 전역 변수에 대한 참조로 변환해야한다고 결정합니까?

여기에서 우리의 레거시 응용 프로그램에서 새 코드의 새 ES 모듈 구문을 점진적으로 선택하면서 같은 코드가 이미 페이지에서 스크립트로 사용 가능하다는 점을 이용합니다.

나는 Webpack's guide on "shimming"을 확인했지만,이 게시물에서 설명한대로 을 제외하고는을 제외한 것으로 보입니다.

Answer 1

사용 웹팩의 externals :

방지 특정 수입 패키지의 번들 대신 런타임에 이러한 외부 종속성을 검색 할 수 있습니다.

externals: { 
    jquery: 'jQuery' 
}