웹팩 번들은 부트 스트랩의 자바 스크립트 내가 다음 달성하기 위해 노력하고 jQuery를

Question

이 필요합니다 (이 순서 )

• bundlejquery, tether 및 bootstrap.js.
• 이 번들을 HTML 페이지 내에로드하고 그 아래에 다른 페이지 특정 스크립트를로드하십시오.

이것을 달성하려면 webpack 2과 CommonsChunkPlugin을 사용하고 있습니다. 여기 내 설정입니다. entries를 들어

내가 가진 :

plugins 섹션에서

const scriptsEntry = { 
    blog_index: SRC_DIR + "/js/pages/blog_index.js", 
    blog_about: SRC_DIR + "/js/pages/blog_about.js", 
    vendor: ["jquery", "tether", "bootstrap"] 
}; 

: 소스 디렉토리 내부

<script src="{{ url_for('static', filename='dist/js/vendor.bundle.js') + anti_cache_token }}"></script> 
<script src="{{ url_for('static', filename='dist/js/home.js') + anti_cache_token }}"></script> 

:

scriptsPlugins.push(
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "vendor", 
     filename:"vendor.bundle.js", 
     minChunks: 2 
    }), 
    ... 
})); 

내부 'index.html을이'나는 번들을로드 blog_index.js에서 나는 jquery을 사용합니다. :

import $ from "jquery"; 

$(".home-click").click(function() { 
    alert("clicked from .home-click"); 
}); 

결과 : 오류없이

• 모든 번들.
• .home-click을 클릭하면 alert box이 예상대로 실행됩니다.
  • vendor.bundle.js 포함 :
  나는 것을 볼 수 번들 파일을 확인
  • jquery, tether 및 bootstrap.
  • 예를 들어 blog_index.js (webpack 2을 실행 한 후)을 보면이 파일에는 jquery 가져 오기가 번들로 제공되지 않지만 vendor.bundle.js (예상대로)이라는 것을 알 수 있습니다. 내가 브라우저 콘솔 확인할 때

그러나, 나는 다음과 같은 문제이 :이 라인 vendor: ["jquery", "tether", "bootstrap"]에있는 라이브러리의 순서를 전환했지만, 아무것도 변경되지

을 - 오류가 아직 있습니다.

webpack 플러그인을 추가로 사용하지 않고이 문제를 어떻게 해결할 수 있는지 알고 계십니까?

Answer 1

부트 스트랩의 자바 스크립트는 window 개체에 jQuery가 연결되어 있다고 가정하므로 아무 것도 필요하지 않습니다.

번들을 묶음으로써 변수를 전역 범위에 노출시키지 않거나 최소한 그렇게해서는 안됩니다. 따라서 부트 스트랩 코드는 jQuery를 찾을 수 없습니다.

은 플러그인이 추가하면 jQuery가 jQuery 객체 인 jQuery를 패키지의 수출, 글로벌로 가정의 모든 인스턴스를 대체 할

new webpack.ProvidePlugin({ 
    $: 'jquery', 
    jQuery: 'jquery', 
    'window.jQuery': 'jquery', 
    tether: 'tether', 
    Tether: 'tether', 
    'window.Tether': 'tether', 
}) 

이 확인되어야한다. 같음 Tether