我最近从使用Require.js切换到使用WebPack和Babel。在过去,我会在我的JS模块中使用CommonJS标准,就像这样
var $ = require('jquery');
require('bootstrap');
由于Bootstrap是一个jQuery插件,所以jQuery将首先加载,bootstrap将第二次加载。
Babel允许我使用ES6 import
语句。但是当我写的时候
import $ from 'jquery';
import Bootstrap from 'bootstrap';
我得到的错误是$ is undefined
。Bootstrap假设window.$
存在,但import
不会污染窗口对象,这是一件好事,但我的代码如下所示:
// legacy loading for bootstrap
var $ = require('jquery');
window.$ = $;
require('bootstrap');
// the rest of the imports
import _ from 'underscore';
一定有更好的解决办法。任何帮助感激不尽。
6条答案
按热度按时间wlp8pajw1#
如果您的构建中有
Webpack
......你需要使用Webpack's provide plugin。由于错误是
jQuery is not defined
,我们将用插件 * 定义/提供 * 它:webpack configuration
中:现在,在
ES6/2015 module
中:参考:https://2017-sparkler.rhcloud.com/2017/02/01/bootstrap-in-webpack-es6-2015-project/
祝你好运。
o3imoua42#
Bootstrap 4解决方案
Bootstrap 4有两个依赖项:jQuery和Popper.js。
1.安装必要的软件包:
1.在您的应用中,导入如下:
1.如果你想在jQuery中全局使用
$
,请将以下内容添加到你的webpack配置中(对我来说是webpack.base.conf.js
):ej83mcc03#
这里的一些答案说使用Webpack的
ProvidePlugin
。到2020年和
bootstrap v4.4.1
,您不需要使用该插件。Bootstrap将
jquery
和popper.js
定义为对等依赖项,因此您只需将它们与bootstrap
一起安装:并在代码中使用它们,例如:
voase2hg4#
如果您使用Bootstrap 4 alpha,则需要
tether
和jQuery
。此处讨论导入:How to fix the error; 'Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)'q1qsirdb5#
wrappers/jquery.js
:sxpgvts36#
所有这些都是旧的答案,在2023年
import 'bootstrap';
不适合我。相反,我不得不做:在package.json中
在你的JS里