Błąd przy użyciu pakietów Bootstrap i jQuery w ES6 z Browserify

Question

Próbuję użyć Bootstrap z jQuery. Używam Browserify z transformacją Babel do kompilacji. Otrzymuję następujący błąd.

Uncaught ReferenceError: jQuery is not defined 

Próbowałem już zaimportować pakiety w ten sposób, ale otrzymałem powyższy błąd.

import $ from 'jquery'; 
import Bootstrap from 'bootstrap'; 

wyszukiwanie wokół, znalazłem this answer, więc próbowałem tego, ale wciąż ten sam błąd.

import $ from 'jquery'; 
window.$ = window.jQuery = $; 
import Bootstrap from 'bootstrap'; 
Bootstrap.$ = $; 

Czy importuję te pakiety nieprawidłowo z ES6, czy odbywa się to w inny sposób? Ostatnią rzeczą, którą próbowałem, było zaimportowanie pakietów bez takiego ES6, ale nadal mam ten sam błąd.

window.$ = window.jQuery = require('jquery'); 
var Bootstrap = require('bootstrap'); 
Bootstrap.$ = $ 

Answer 1

Jak wspomniano przez Pete TNT, istnieje bug w pakiecie Bootstrap używam. Przełączyłem się na używanie this Bootstrap package i wprowadziłem następujące zmiany do mojego kodu.

window.$ = window.jQuery = require('jquery'); 
var Bootstrap = require('bootstrap-sass'); 
Bootstrap.$ = $; 
require('../../../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap'); 

Wygląda na to, na chwilę obecną, ES6 import s nie będzie działać z jquery i bootstrap pakietów w sposób starałem się ich używać.

Answer 2

@ Rozwiązanie Enijara nie działa dla mnie. Musiał użyć starej metody CDN.

<script src="https://code.jquery.com/jquery-3.1.0.min.js" 
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" 
crossorigin="anonymous"></script> 

https://code.jquery.com/

Answer 3

Zaakceptowanych odpowiedź pomogła mi właściwą drogę, ale ostateczne rozwiązanie dla mnie było nieco krótsze więc będę pisać również tutaj.

// Importing jQuery in ES6 style 
import $ from "jquery"; 

// We need to expose jQuery as global variable 
window.jQuery = window.$ = $; 

// ES6 import does not work it throws error: Missing jQuery 
// using Node.js style import works without problems 
require('bootstrap'); 

Answer 4

Próbowałem wiele wiele rozwiązań, ale z jakiegoś powodu musiałem zdefiniować globalnego jquery w małymi nad scenariuszem bazowym (np. Main.js)

import jQuery from 'jquery' 
global.jQuery = jQuery 
global.jquery = jQuery // jquery lowercase was the solution for me 
global.$ = jQuery 
let Bootstrap = require('bootstrap') 
import 'bootstrap/dist/css/bootstrap.css' 

Rozwiązanie to również działa dla vue-cli + jquery + bootstrap