Webpack bó - cần JavaScript Bootstrap của jQuery

Question

tôi đang cố gắng để đạt được những điều sau đây:

• bundle (theo thứ tự này) jquery, tether, và bootstrap.js.
• tải gói này trong trang HTML và bên dưới tải các tập lệnh cụ thể của trang khác.

Để đạt được điều này, tôi đang sử dụng webpack 2 và CommonsChunkPlugin. Đây là cấu hình của tôi.

Đối entries tôi có:

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

Trong plugins phần:

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

Bên trong 'index.html' Tôi nạp bó:

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

Bên trong thư mục nguồn trong số blog_index.js Tôi sử dụng số jquery :

import $ from "jquery"; 

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

Kết quả:

• tất cả mọi thứ mà không bó bất kỳ lỗi nào.
• khi tôi nhấp vào .home-click vụ cháy alert box như mong đợi.
• kiểm tra các tập tin kèm tôi thấy rằng:
  • vendor.bundle.js chứa: jquery, tether, và bootstrap.
  • tìm bên trong, ví dụ: blog_index.js (sau khi được chạy qua webpack 2), tôi nhận thấy rằng nhập jquery không được nhóm bên trong tệp này, nhưng vendor.bundle.js (điều này đúng như mong đợi).

Tuy nhiên, tôi có sau vấn đề khi tôi kiểm tra trình duyệt giao diện điều khiển:

tôi đã cố gắng chuyển đổi thứ tự của các thư viện trong dòng này vendor: ["jquery", "tether", "bootstrap"], nhưng không có gì thay đổi - các lỗi vẫn còn đó.

Bạn có biết cách tôi có thể giải quyết vấn đề này hay không, tốt nhất là không sử dụng các plugin bổ sung webpack?

Answer 1

javascript của Bootstrap giả định rằng jQuery được nối vào đối tượng window, nó không yêu cầu nó hoặc bất kỳ thứ gì.

Bằng cách sắp xếp nội dung, bạn không hiển thị các biến cho phạm vi toàn cầu hoặc ít nhất bạn không nên làm điều đó. Vì vậy, mã bootstrap không thể tìm thấy jQuery.

Thêm phần này vào plugin của bạn và bạn sẽ có ok

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

này sẽ thay thế tất cả các trường hợp jQuery được giả định như toàn cầu với việc xuất khẩu của gói jQuery, mà là đối tượng jQuery. Tương tự cho Tether