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

Posted 2023-02-22

【中文标题】在带有 Browserify 的 ES6 中使用 Bootstrap 和 jQuery 包时出错

【英文标题】：Error using Bootstrap & jQuery Packages in ES6 with Browserify

【发布时间】：2016-03-11 06:28:03

【问题描述】：

我正在尝试将Bootstrap 与jQuery 一起使用。我使用Browserify 和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.$ = $

【问题讨论】：

你为什么要像这样导入文件，任何特定的用例？

我正在导入它们，因为这就是 browserify 的工作方式。你像这样导入包，然后编译成一个js文件。

它们是否与您要导入它们的 .js 文件位于同一文件夹中？

@NickKenens 我所有的包都在node_modules 目录中。我对node_modules 中的任何软件包都没有问题。仅当我尝试使用 bootstrap 包时才会出现此问题。

这有望很快为 BS4 修复，请参阅 github.com/twbs/bootstrap/issues/17201

【参考方案1】：

接受的答案帮助我走上正轨，但对我来说最终的解决方案有点短，所以我也会在这里发布。

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

【讨论】：

我完全喜欢这个解决方案，而不是在 webpack 配置中编写插件部分。

【参考方案2】：

正如Pete TNT 所提到的，我正在使用的Bootstrap 包中有一个bug。我切换到使用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 包一起使用。

【讨论】：

仅供参考，我只需使用 require() 而不是 import 就可以使用原始的 bootstrap 包。

@Enijar "看起来，ES6 导入暂时无法与 jquery 和 bootstrap 包一起使用" 2016 年仍然如此，因为我不能还使用 ES6 模块语法导入 bootstrap-saas 及其依赖项 jquery

这对我有用。有没有更干净的方法？

【参考方案3】：

我尝试了很多解决方案，但由于某种原因，我不得不在基本脚本（例如 main.js）上以 小写 定义全局 jquery

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

【参考方案4】：

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