twitter-bootstrap Bootstrap 4 Beta 使用 Webpack 3.x 导入 Popper.js 抛出 Popper 不是构造函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45645971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Beta importing Popper.js with Webpack 3.x throws Popper is not a constructor
提问by ghiscoding
So Bootstrap 4 Betais out... yey! However Tether has been replaced by Popper.jsfor tooltip (and other features). I saw an error thrown in the console fast enough to advise me of the change to Popper.js:
所以Bootstrap 4 Beta出来了......是的！但是 Tether 已被Popper.jsfor 工具提示（和其他功能）所取代。我看到控制台中抛出的错误足够快，以通知我更改为Popper.js：
Bootstrap dropdown require Popper.js
Seems easy enough, I went and updated my webpack.config.js(the entire config can be seen here) and Bootstrap then started working (the only change I did was to replace Tether with Popper):
看起来很简单，我去更新了我的webpack.config.js（整个配置可以在这里看到），然后 Bootstrap 开始工作（我所做的唯一改变是用 Popper 替换 Tether）：
plugins: [
new ProvidePlugin({
'Promise': 'bluebird',
'$': 'jquery',
'jQuery': 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
Popper: 'popper.js'
}),
I also did the import 'bootstrap'in my main.tsfile.
我也在import 'bootstrap'我的main.ts文件中做了。
However I now have another problem (which I did not have with Tether), a new error is thrown in the console:
但是我现在有另一个问题（我在 Tether 中没有），控制台中抛出了一个新错误：
Uncaught TypeError: Popper is not a constructor
If I try to debug in Chrome, I do have Popperloaded as an Object (which is why Bootstrap stopped complaining) as you can see in the print screen below. 
如果我尝试在 Chrome 中调试，我确实已Popper作为对象加载（这就是 Bootstrap 停止抱怨的原因），如下面的打印屏幕所示。
Finally to include all my code. I use Bootstrap tooltip with a simple custom element built with Aureliaand TypeScript(which used to work with previous Bootstrap alpha 6 and Tether)
最后包含我所有的代码。我将 Bootstrap 工具提示与一个用Aureliaand构建的简单自定义元素一起使用TypeScript（它曾经与以前的 Bootstrap alpha 6 和 Tether 一起使用）
import {inject, customAttribute} from 'aurelia-framework';
import * as $ from 'jquery';
@customAttribute('bootstrap-tooltip')
@inject(Element)
export class BootstrapTooltip {
element: HTMLElement;
constructor(element: HTMLElement) {
this.element = element;
}
bind() {
$(this.element).tooltip();
}
unbind() {
$(this.element).tooltip('dispose');
}
}
Looks like I did not import Poppercorrectly, if so then what is the best way to achieve that with Webpack 3.x?
看起来我没有Popper正确导入，如果是这样，那么实现这一目标的最佳方法是什么Webpack 3.x？
回答by ghiscoding
While browsing Bootstrap 4 documentation. I actually found a section about Webpackwhich explains how to install it correctly. Following the Bootstrap - installing with Webpackdocumentation, the answer is to simply modify the webpack.config.jswith the following:
在浏览Bootstrap 4 文档时。我实际上找到了一个关于Webpack如何正确安装它的部分。遵循Bootstrap - 使用 Webpack文档安装，答案是简单地修改webpack.config.js以下内容：
plugins: [
// ...
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
// ...
]
and let's not forget to importit in the main.ts
让我们不要忘记import它main.ts
import 'bootstrap';
and voilà! We are back in business :)
瞧！我们恢复营业了:)
回答by Hassan Azimi
If you are using Webpack Do this:
如果您使用的是 Webpack，请执行以下操作：
window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default; // pay attention to "default"
require('bootstrap/dist/js/bootstrap');
回答by Syed
In bootstrap": "^4.1.1"no need to import jqueryand popper.jsbecause those plugins will be already included when 'bootstrap' or bootstrap's plugins imported individually.
在bootstrap": "^4.1.1"没有必要的进口jquery，并popper.js因为这些插件将在“引导”或引导的插件单独进口来已经包括在内。
Noticethat if you chose to import plugins individually, you must also install exports-loader
请注意，如果您选择单独导入插件，则还必须安装exports-loader
No need to require files require('exports-loader?file ... ');as mentioned herebecause this will be taken care automatically by just installing $ npm install exports-loader --save-dev
不需要这里require('exports-loader?file ... ');提到的文件，因为这将通过安装自动处理$ npm install exports-loader --save-dev
import 'bootstrap'; // Import all plugins at once
//
// Or, import plugins individually
//
// import 'bootstrap/js/src/alert';
// import 'bootstrap/js/src/button';
// import 'bootstrap/js/src/carousel';
// import 'bootstrap/js/src/collapse';
// import 'bootstrap/js/src/dropdown';
// import 'bootstrap/js/src/modal';
// import 'bootstrap/js/src/popover';
// import 'bootstrap/js/src/scrollspy';
// import 'bootstrap/js/src/tab';
// import 'bootstrap/js/src/tooltip';
// import 'bootstrap/js/src/util';
There is no need to do anything like below:
无需执行以下操作：
const webpack = require('webpack');
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
]
}
}
I am a vue.jsdeveloper and in new vue-cli-3, we create vue.config.jsin root and place code like above to register new plugin, but as said there is no need to do all this in bootstrap": "^4.1.1".
我是一名vue.js开发人员，在 new 中vue-cli-3，我们vue.config.js在 root 中创建并放置像上面这样的代码来注册新插件，但如上所述，不需要在bootstrap": "^4.1.1".
Bootstrap's tooltip plugin is depend on popper.jsand need to be enabled manually, so you can do like below in the component where you use tooltip element:
Bootstrap 的工具提示插件依赖popper.js并且需要手动启用，因此您可以在使用工具提示元素的组件中执行以下操作：
<script>
import $ from 'jquery';
export default {
mounted() {
$('[data-toggle="tooltip"]').tooltip();
},
};
</script>
回答by Phil Cox
I just ran into the same issue, and the solution is described here: https://github.com/FezVrasta/popper.js/issues/287
我刚刚遇到了同样的问题，这里描述了解决方案：https: //github.com/FezVrasta/popper.js/issues/287
My main.tsnow looks like something like the following:
我main.ts现在看起来像下面这样：
import "jquery";
import Popper from "popper.js";
(<any>window).Popper = Popper;
require("bootstrap");
And I had to run npm install @types/requirejs --saveto get the call to requireworking.
我不得不跑去npm install @types/requirejs --save接到require工作的电话。
EDIT: I totally missed this the first time around, but the documention actually has a better way to solve this https://getbootstrap.com/docs/4.0/getting-started/webpack/
编辑：我第一次完全错过了这个，但文档实际上有一个更好的方法来解决这个问题https://getbootstrap.com/docs/4.0/getting-started/webpack/
plugins: [
...
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
// In case you imported plugins individually, you must also require them here:
Util: "exports-loader?Util!bootstrap/js/dist/util",
Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
...
})
...
]
回答by HolyM
In ASP.net Core 2 project add the following scripts to of main HTML file ("_Layout.cshtml" file)
在 ASP.net Core 2 项目中，将以下脚本添加到主 HTML 文件（“_Layout.cshtml”文件）
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/popper.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
For me it's working.
对我来说它的工作。
