Ошибка при использовании пакетов Bootstrap & jQuery в ES6 с Browserify

Я пытаюсь использовать Bootstrap с jQuery. Я использую Browserify с Babel преобразуется в компиляцию. Я получаю следующую ошибку.

Uncaught ReferenceError: jQuery is not defined

Я попытался импортировать такие пакеты, как это, но я получаю вышеуказанную ошибку.

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

Поиск вокруг, я нашел этот ответ, поэтому я попробовал это, но все равно получаю ту же ошибку.

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

Я импортирую эти пакеты неправильно с ES6 или это делается по-другому? Последнее, что я попробовал, - это импортировать пакеты без ES6, но я все равно получил ту же ошибку.

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

Ответ 1

Как упоминалось Pete TNT, существует ошибка в пакете Bootstrap, который я использую. Я переключился на этот пакет Bootstrap и внес следующие изменения в мой код.

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

Похоже, что для времени ES6 import не будет работать с пакетами jquery и bootstrap так, как я пытался их использовать.

Ответ 2

Принятый ответ помог мне на правильном пути, но окончательное решение для меня было немного короче, поэтому я также опубликую здесь.

// 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');

Ответ 3

Решение @Enijar не работает для меня. Пришлось использовать старый метод 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/

Ответ 4

Я пробовал много решений, но по какой-то причине мне пришлось определить глобальный jquery в нижнем регистре на базе script (например, 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'

Эти решения также работают для vue-cli + jquery + bootstrap