webpack에 전역 변수와 함께 NPM 모듈 사용

Question

webpack + babeljs 프로젝트에서 exif-js을 사용하려고합니다. 이 라이브러리 (exif-js)는 "EXIF"라는 전역 변수를 생성하지만 js 스크립트에서도 Chrome devtools에서 액세스 할 수 없습니다.

모든 페이지에서 "EXIF"를 볼 수 있도록 webpack 제공 플러그인을 사용하려고했지만 작동하지 않습니다.

plugins: [ 
    new webpack.ProvidePlugin({ 
     EXIF: 'exif-js/exif.js' 
    }) 
] 

웹팩 프로젝트에서이 라이브러리를 사용하는 가장 좋은 방법은 무엇입니까?

감사합니다.

Answer 1

CommonJS와 비슷하지만 EXIF var을 전역 범위에 첨부하는 대신 내보내는 기능입니다. 웹팩와 의미

당신은 다른 모듈처럼 가져올 수 있습니다,

var exif = require('exif-js');

는 설명하기 위해 당신이 실제로 글로벌 범위에서 필요한 경우 this webpackbin

하면, 수동으로 첨부 할 수 있습니다 참조 그것은 window 객체를 가져온 후에 :

var exif = require('exif-js'); 
window.EXIF = exif; 

대답을 t 그는 전역 변수를 설정 스크립트를 사용에 관한 질문, 당신이 보여 당신이 일반적으로 하나 ProvidePlugin를 사용하거나 externals를 사용할 수의 실제 제목 :

이

외적인 구성 옵션은 출력 번들에서 제외 의존하는 방법을 제공합니다 . 대신 생성 된 번들은 소비자 환경에 존재하는 의존성에 의존합니다. 이 기능은 일반적으로 라이브러리 개발자에게 가장 유용하지만 다양한 응용 프로그램이 있습니다.

(당신의 webpack.config.js에서) 예를 들어

:

externals: { 
    jquery: 'jQuery' 
} 

그러나,이 ProvidePlugin 다르게 작동합니다. ProvidePlugin은 선언되지 않은 변수를 전역 변수로 간주하지만, externals은 특정 모듈 이름을 존재한다고 가정 된 전역 변수로 해석합니다 (예 : require('jquery')은 window.$으로 해석 됨).