作者:手机用户2502933795 | 来源:互联网 | 2023-01-22 01:46
如何解决《Bootstrap4错误"Bootstrap下拉需要Popper.js",使用AureliaCLI和Require.js》经验,为你挑选了2个好方法。
我在使用requirejs和使用TypeScript的Aurelia CLI应用程序(v0.31.1)中配置Bootstrap 4 beta时遇到问题.尝试了几个配置变化后,我继续收到以下控制台错误:
未捕获的错误:Bootstrap下拉列表需要Popper.js
以下是重现的步骤.首先,安装包:
$ npm install --save jquery bootstrap@4.0.0-beta popper.js
接下来,我配置了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在bootstrap之前注册
使用UMD模块
popper.js被设置为jstery旁边的bootstrap的依赖项
最后,在我的app.ts中:
import 'bootstrap';
使用此配置,使用构建au build
工作正常.但运行时,使用au run --watch
我得到以下控制台错误:
未捕获的错误:引导下拉需要Popper.js(https://popper.js.org)(defaults.js:19)
未捕获的错误:引导下拉需要Popper.js(https://popper.js.org)(引导. min.js:6)
...再进一步:
未捕获TypeError:plugin.load不是Module的函数.(defaults.js:19)
不幸的是,Bootstrap 4文档只提到了webpack上的说明.搜索Aurelia的Gitter.im频道和StackOverflow也是如此.我找不到关于Aurelia CLI和Require.js的样本.最后,Google点击仅显示嵌入alpha版本的示例(依赖于'tethering'而不是'popper').
关于SO的类似问题,它们有相同的错误,但不适用于我的情况:
Bootstrap 4 Beta使用Webpack 3.x导入Popper.js抛出Popper不是构造函数
Angular 4 Bootstrap下拉列表需要Popper.js
还有几个......
所以,我的问题是:如何在Aurelia CLI应用程序中使用Popper.js配置Bootstrap 4(使用Require.js,而不是Webpack)?
谢谢.
1> 4imble..:
波普尔在测试版中取代了Tether.
因此,您需要将popher与popper交换(或者只是在没有alpha的情况下将其添加到aurelia.json文件的prepend部分).(确保链接到下面看到的UMD版本)
"prepend": [
...
"node_modules/jquery/dist/jquery.js",
"node_modules/popper.js/dist/umd/popper.min.js",
...
]
您还需要按预期方式进行捆绑,如下所示:
{
"name": "bootstrap4",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": [
"jquery"
],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
=附录=
与系绳不同,popper似乎不需要预先设置.所以你可以像任何其他依赖一样包含它
{
"name": "popper.js",
"path": "../node_modules/popper.js/dist/umd",
"main": "popper.min"
},
2> smoore4..:
我卸载了popper.js并使用了bs4中内置的版本js/bootstrap.bundle.min
代替js/bootstrap.min
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.bundle.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
},
我发现这是解决问题的最简单方法.其他读者请注意:在zipfile中,他们提供下载(目前)文件是"`bootstrap-4.0.0/dist/js/bootstrap.bundle.min.js`"