Ошибка при использовании пакетов 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