在带有 Browserify 的 ES6 中使用 Bootstrap & jQuery 包时出错
Error using Bootstrap & jQuery Packages in ES6 with Browserify
我正在尝试使用 Bootstrap with jQuery. I'm using Browserify with a Babel 转换进行编译。我收到以下错误。
Uncaught ReferenceError: jQuery is not defined
我试过像这样导入包,但出现上述错误。
import $ from 'jquery';
import Bootstrap from 'bootstrap';
四处搜索,我发现 this answer,所以我尝试了这个,但我仍然得到同样的错误。
import $ from 'jquery';
window.$ = window.jQuery = $;
import Bootstrap from 'bootstrap';
Bootstrap.$ = $;
我是不是用 ES6 错误地导入了这些包,还是以不同的方式导入了这些包?我尝试的最后一件事是像这样导入没有 ES6 的包,但我仍然遇到同样的错误。
window.$ = window.jQuery = require('jquery');
var Bootstrap = require('bootstrap');
Bootstrap.$ = $
如 Pete TNT, there is a bug in the Bootstrap package I am using. I switched to using this Bootstrap package 所述,并对我的代码进行了以下更改。
window.$ = window.jQuery = require('jquery');
var Bootstrap = require('bootstrap-sass');
Bootstrap.$ = $;
require('../../../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap');
目前看来,ES6 import
s 无法以我尝试使用它们的方式与 jquery
和 bootstrap
包一起使用。
@Enijar 的解决方案对我不起作用。必须使用旧的 CDN 方法。
<script src="https://code.jquery.com/jquery-3.1.0.min.js"
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
crossorigin="anonymous"></script>
接受的答案帮助我走上正轨,但对我来说最终的解决方案有点短,所以我也会 post 在这里。
// 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');
我已经尝试了很多很多解决方案,但出于某种原因,我不得不在基本脚本的小写中定义全局jquery(例如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
我正在尝试使用 Bootstrap with jQuery. I'm using Browserify with a Babel 转换进行编译。我收到以下错误。
Uncaught ReferenceError: jQuery is not defined
我试过像这样导入包,但出现上述错误。
import $ from 'jquery';
import Bootstrap from 'bootstrap';
四处搜索,我发现 this answer,所以我尝试了这个,但我仍然得到同样的错误。
import $ from 'jquery';
window.$ = window.jQuery = $;
import Bootstrap from 'bootstrap';
Bootstrap.$ = $;
我是不是用 ES6 错误地导入了这些包,还是以不同的方式导入了这些包?我尝试的最后一件事是像这样导入没有 ES6 的包,但我仍然遇到同样的错误。
window.$ = window.jQuery = require('jquery');
var Bootstrap = require('bootstrap');
Bootstrap.$ = $
如 Pete TNT, there is a bug in the Bootstrap package I am using. I switched to using this Bootstrap package 所述,并对我的代码进行了以下更改。
window.$ = window.jQuery = require('jquery');
var Bootstrap = require('bootstrap-sass');
Bootstrap.$ = $;
require('../../../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap');
目前看来,ES6 import
s 无法以我尝试使用它们的方式与 jquery
和 bootstrap
包一起使用。
@Enijar 的解决方案对我不起作用。必须使用旧的 CDN 方法。
<script src="https://code.jquery.com/jquery-3.1.0.min.js"
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
crossorigin="anonymous"></script>
接受的答案帮助我走上正轨,但对我来说最终的解决方案有点短,所以我也会 post 在这里。
// 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');
我已经尝试了很多很多解决方案,但出于某种原因,我不得不在基本脚本的小写中定义全局jquery(例如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