带有Aurelia CLI和Require.js的Bootstrap 4错误"Bootstrap下拉列表需要Popper.js" [英] Bootstrap 4 error "Bootstrap dropdown require Popper.js", with Aurelia CLI and Require.js
问题描述
我在使用requirejs和TypeScript在Aurelia CLI应用程序(v0.31.1)中配置Bootstrap 4 beta时遇到问题.在尝试了几种配置变化之后，我继续收到以下控制台错误:
I'm having trouble configuring Bootstrap 4 beta in an Aurelia CLI app (v0.31.1) with requirejs and using TypeScript. After having tried several config variations I keep on getting the following console error:
未捕获的错误:引导程序下拉列表需要Popper.js
Uncaught Error: Bootstrap dropdown require Popper.js
以下是复制步骤.首先，安装软件包:
Here are the steps to reproduce. First, install the packages:
$ npm install --save jquery bootstrap@4.0.0-beta popper.js
接下来，我已经配置了 aurelia.json :
Next, I've configured aurelia.json:
"jquery",
{
"name": "popper.js",
"path": "../node_modules/popper.js/dist/umd",
"main": "popper"
},
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": [
"jquery",
"popper.js"
],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
请注意上面的配置:
- popper.js在引导程序之前注册
- 使用了UMD模块
- popper.js设置为jquery旁边的bootstrap依赖项
最后，在我的 app.ts 中:
import 'bootstrap';
使用此配置，使用au build进行构建可以正常工作.但是在运行时，使用au run --watch会出现以下控制台错误:
With this configuration, building using au build works fine. But upon running, using au run --watch I get the following console errors:
未捕获的错误:Bootstrap下拉列表需要Popper.js( https://popper.js.org )(默认值.js:19)
未捕获的错误:Bootstrap下拉列表需要Popper.js( https://popper.js.org )(bootstrap.min. js:6)
...进一步了解:
未捕获的TypeError:plugin.load在Module中不是函数. (defaults.js:19)
Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) (defaults.js:19)
Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org) (bootstrap.min.js:6)
... a bit further on:
Uncaught TypeError: plugin.load is not a function at Module. (defaults.js:19)
不幸的是，Bootstrap 4文档仅提及了 webpack上的说明.在Aurelia的 Gitter.im频道和StackOverflow上都进行搜索.我找不到带有Require.js的有关Aurelia CLI的示例.最后，Google热门歌曲仅显示了嵌入alpha版本的示例(依赖于网络共享"而不是"popper").
Unfortunately, the Bootstrap 4 docs only mention instructions on webpack. So does a search on both Aurelia's Gitter.im channel and on StackOverflow. I cannot find samples regarding Aurelia CLI with Require.js. Finally, Google hits shows only examples for embedding the alpha versions (which relied on 'tethering' rather than 'popper').
关于SO的类似问题，具有相同的错误，但不适用于我的情况:
Similar questions on SO, which have the same error but aren't applicable to my situation:
- Bootstrap 4 Beta importing Popper.js with Webpack 3.x throws Popper is not a constructor
- Angular 4 Bootstrap dropdown require Popper.js
- And several more...
所以，我的问题是:如何在Aurelia CLI应用程序中使用Popper.js配置Bootstrap 4(使用Require.js，而不是Webpack)?
So, my question: how can I configure Bootstrap 4 with Popper.js in an Aurelia CLI app (using Require.js, not Webpack)?
谢谢.
推荐答案
Popper在Beta中取代了Tether.
Popper replaced Tether in the beta.
因此，您需要将栓子与popper交换出去(或者，如果您从未使用过alpha，则将其添加)到aurelia.json文件的prepend部分. (确保您链接到下面显示的UMD版本)
As such you will need to swap out tether with popper (or just add it if you never had the alpha) to the prepend section of your aurelia.json file. (Make sure you link to the UMD version seen below)
"prepend": [
...
"node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.min.js",
...
]
您还需要按预期进行捆绑，如下所示:
You will also need the bundling as expected, something like this:
{
"name": "bootstrap4",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": [
"jquery"
],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
=附录=
看起来好像不像系绳，popper不需要前置. 因此，您可以像使用
=Addendum=
Unlike tether, popper does not need to be prepended it seems. So you could include it like any other dependency with
{
"name": "popper.js",
"path": "../node_modules/popper.js/dist/umd",
"main": "popper.min"
},
这篇关于带有Aurelia CLI和Require.js的Bootstrap 4错误"Bootstrap下拉列表需要Popper.js"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
