Twitter bootstrap 通过ES6导入加载引导的最佳方式是什么？

我最近从使用Require.js改为使用Babel的WebPack。在过去，我会在我的JS模块中使用CommonJS标准，如下所示

var $ = require('jquery');
require('bootstrap');

由于Bootstrap是jQuery插件，jQuery将首先加载，Bootstrap将第二次加载

Babel允许我使用ES6

import

语句。但是当我写作的时候

import $ from 'jquery';
import Bootstrap from 'bootstrap';

我得到的错误是，

$未定义

。引导程序假定存在

window.$

，但

import

不会污染window对象，这是一件好事，但我的代码如下所示：

// legacy loading for bootstrap
var $ = require('jquery');
window.$ = $;
require('bootstrap');
// the rest of the imports
import _ from 'underscore';

必须有更好的解决办法。非常感谢您的帮助。

如果您的版本中有

Webpack

。。。 …您需要使用网页包的“提供插件”。由于错误在于未定义

jQuery

，我们将定义/提供插件：

在

网页包配置中

： 现在，在我们的

ES6/2015模块中

： 参考资料：

---

祝你好运。

如果你使用的是引导程序4 alpha，你需要

系带

以及

jQuery

。此处讨论导入：

Bootstrap 4解决方案 Bootstrap4有两个依赖项：jQuery和

安装必要的软件包：

npm install jquery popper.js bootstrap --save

在应用程序中，按如下方式导入：

import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';

如果您想在jQuery中全局使用

$

，请将其添加到您的webpack配置中（这是我的

webpack.base.conf.js

）：

在

wrappers/jquery.js

中：

import jquery from 'jquery;
window.jQuery = window.$ = jquery;

---

这里的一些答案是使用该网页的

ProvidePlugin

从2020年开始，您不需要使用该插件

Bootstrap将

jquery

和

popper.js

定义为对等依赖项，因此您只需将它们与

Bootstrap

一起安装即可：

npm i -S bootstrap jquery popper.js

并在代码中使用它们，例如：

导入“引导”；
从“jquery”导入$；
$(() => {
$（“.element with tooltip”）.tooltip（）；
});

您是否尝试过：从“jQuery”导入jQuery；const$=jQuery；这就是我一直以来在使用bootstrap 4的原因，如果你使用browserify，也许可以使用？最新的bootstrap 3。*？

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery'
  })
]

import './wrappers/jquery';
import 'bootstrap';

import jquery from 'jquery;
window.jQuery = window.$ = jquery;

npm i -S bootstrap jquery popper.js