logo标签列表

Bootstrap 4错误“Bootstrap dropdown require Popper.js”，使用Aurelia CLI和Require.js。

typescriptrequirejsbootstrap-4aurelia
15

我在一个使用Aurelia CLI（v0.31.1）和TypeScript的应用中，尝试配置Bootstrap 4 beta和requirejs时遇到了问题。尝试了多种配置变化后，仍然会出现以下控制台错误：

未捕获的错误：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设置为bootstrap的依赖项，位于jquery旁边

最后，在我的app.ts文件中：

import 'bootstrap';
使用此配置，使用au build进行构建很好。但在运行时，使用au run --watch出现以下控制台错误：

Uncaught Error: Bootstrap下拉需要 Popper.js (https://popper.js.org) (defaults.js:19)
Uncaught Error: Bootstrap下拉需要 Popper.js (https://popper.js.org) (bootstrap.min.js:6)
...略有些进一步：
Uncaught TypeError: plugin.load 不是一个函数 at Module. (defaults.js:19)

不幸的是，Bootstrap 4文档仅提供了使用webpack的说明。因此，在Aurelia CLI的Gitter.im频道和StackOverflow上搜索，我找不到关于Require.js的Aurelia CLI示例。最后，谷歌结果只显示了嵌入alpha版本的示例（它们依赖于“tethering”而不是“popper”）。

SO上类似的问题，出现了相同的错误，但不适用于我的情况：

因此，我的问题是：如何在Aurelia CLI应用程序中使用Require.js配置Bootstrap 4与Popper.js？

谢谢。

6个回答
13

Popper在beta版中取代了Tether。

因此，您需要将tether替换为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"
        ]
      }

=附录=

与tether不同，似乎不需要在前面添加popper。 因此，您可以像其他依赖项一样将其包含在中。

 {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
 },
太棒了，添加“prepend”确实起作用，甚至不需要改变我的原始捆绑。谢谢！ - Juliën
1
不确定你是否需要将 popper 一起打包，因为这样会导致它被重复引用。 - 4imble
这太棒了，感谢提问和回复！ - Jhonatas Kleinkauff
我严格按照这些说明操作，不再出现jQuery未定义的错误。但是，现在我遇到了“Uncaught TypeError: Popper is not a constructor”的问题。在我的main.ts中，我已经包含了以下内容：import "jquery"; import * as Popper from "popper.js"; (window).Popper = Popper.default; import "bootstrap";这是使用aurelia-cli。 - Jeremy Holt
1
你确定要针对UMD版本的popper吗？它位于不同的文件夹中。 - 4imble
显示剩余3条评论
7

我卸载了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"
    ]
  },
2
我认为这是解决问题最简单的方法。提醒其他读者：在他们提供的下载文件中（目前），文件名为“bootstrap-4.0.0/dist/js/bootstrap.bundle.min.js”。 - knb
也解决了我的问题。只需引用“bootstrap.bundle.min.js”即可。 - Sameer
5

将以下代码添加到您的代码中。

<!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
这个答案很有帮助，谢谢。 - Swap-IOS-Android
4
使用捆绑版本的BS4对我有用，具体如下： - 删除popper：`npm uninstall popper.js` - 更新到BS4或更高版本：`npm install bootstrap --save` - 确保已安装jquery：`npm install jquery --save` - 编辑`.angular-cli.json`以包括jquery和捆绑的BS4。 
   "scripts": [
    "../node_modules/jquery/dist/jquery.slim.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
   ],
你如何在文件中引用Popper？ - rball
在ASP.NET MVC中，将引用从bootstrap更改为bootstrap.bundlebundles.Add(new ScriptBundle("/bundles/bootstrap").Include( "/Scripts/bootstrap.bundle.js", "~/Scripts/respond.js" ));' - moto_geek
0

使用新的Bootstrap 4，您只需包含以下内容：

<script type="text/javascript" src="/assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js">
</script>

Popper.js已经包含在此文件中。请查看Bootstrap文档下拉菜单： https://getbootstrap.com/docs/4.0/components/dropdowns/#overview

附注：您当然需要安装Bootstrap 4！这可能不完全是您的答案，但对于其他没有使用Aurelia CLI和Require.js的人来说，它可能会有很大帮助。

0

截至最终的Bootstrap 4.0，以下是与Popper一起使用的Bootstrap的工作配置

//file; aurelia_project/aurelia.json
"dependencies": [   
    ...
    ... // other dependencies
    ...

   "text",
   "jquery",
   {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
   },
   {
     "name": "bootstrap",
     "path": "../node_modules/bootstrap/dist",
     "main": "js/bootstrap.min",
     "deps": ["jquery"],
     "exports": "$",
     "resources": [
       "css/bootstrap.css"
     ]
   },
...
... // remaining dependencies
...
],

这适用于最新的aurelia和bootstrap（截至2018年2月）而无需使用prepend方法。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，