在带有 Browserify 的 ES6 中使用 Bootstrap & jQuery 包时出错

Question

我正在尝试使用 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.$ = $

Answer 1

如 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 imports 无法以我尝试使用它们的方式与 jquery 和 bootstrap 包一起使用。

Answer 2

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

Answer 3

接受的答案帮助我走上正轨，但对我来说最终的解决方案有点短，所以我也会 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');

Answer 4

我已经尝试了很多很多解决方案，但出于某种原因，我不得不在基本脚本的小写中定义全局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

在带有 Browserify 的 ES6 中使用 Bootstrap & jQuery 包时出错

Error using Bootstrap & jQuery Packages in ES6 with Browserify

javascript

jquery

ecmascript-6

browserify