使用ES6导入加载Bootstrap的最佳方法是什么？

Question

我最近从使用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';

我收到$ is undefined的错误。 Bootstrap假定存在window.$，但import不会污染窗口对象，这是一件好事，但是我的代码就是这样：

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

必须有更好的解决方案。任何帮助表示赞赏。

Answer 1

如果您的构建中有Webpack ...

...您需要使用 Webpack提供的插件。由于错误是jQuery is not defined，我们将使用插件定义/提供：

在webpack configuration：

中

// webpack.config.js
...
plugins: [
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery'
  })
]
...

现在，我们的ES6/2015 module：

// main.js
...
// jquery is required for bootstrap
import $ from 'jquery'

// bootstrap
import 'bootstrap'

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

参考： https://2017-sparkler.rhcloud.com/2017/02/01/bootstrap-in-webpack-es6-2015-project/

祝你好运。

Answer 2

Bootstrap 4解决方案

Bootstrap 4有两个依赖项：jQuery和Popper.js。

1. 安装必要的软件包：

   npm install jquery popper.js bootstrap --save
   

2. 在您的应用中，导入如下：

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

3. 如果您想全局使用$ jQuery，请将其添加到您的webpack配置中（对我来说这是webpack.base.conf.js）：

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

Answer 3

如果您使用 Bootstrap 4 alpha ，则需要tether以及jQuery。此处讨论了导入：How to fix the error; 'Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)'

Answer 4

这里的一些答案说要使用Webpack的ProvidePlugin。

从2020年和bootstrap v4.4.1开始，您无需使用该插件。

引导程序将jquery和popper.js都定义为对等依赖项，因此只需将它们与bootstrap一起安装：

npm i -S bootstrap jquery popper.js

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

import "bootstrap";
import $ from "jquery";

$(() => {
    $(".element-with-tooltip").tooltip();
});

Answer 5

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

和wrappers/jquery.js：

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