Bootstrap 4 个错误 "Bootstrap dropdown require Popper.js"，使用 Aurelia CLI 和 Require.js

Question

我在使用 requirejs 和 TypeScript 在 Aurelia CLI 应用程序 (v0.31.1) 中配置 Bootstrap 4 beta 时遇到问题。在尝试了几种配置变体后，我不断收到以下控制台错误：

Uncaught Error: Bootstrap dropdown require 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 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 文档只提到 instructions on webpack. So does a search on both Aurelia's Gitter.im channel 和 Whosebug。我无法使用 Require.js 找到有关 Aurelia CLI 的样本。最后，Google hits 仅显示嵌入 alpha 版本的示例（它依赖于 'tethering' 而不是 'popper'）。

SO上的类似问题，有同样的错误，但不适用于我的情况：

And several more...

所以，我的问题是：如何在 Aurelia CLI 应用程序中使用 Popper.js 配置 Bootstrap 4（使用 Require.js，而不是 Webpack）？

谢谢。

Answer 1

Popper 在测试版中取代了 Tether。

因此，您需要用 popper 替换 tether（或者如果您从未有过 alpha，则只需添加它）到 aurelia.json 文件的前置部分。（确保你 link 到下面看到的 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"
 },

Answer 2

我卸载了 popper.js 并通过使用 js/bootstrap.bundle.min 而不是 js/bootstrap.min

使用了 bs4 内置的版本

  "jquery",
  {
    "name": "bootstrap",
    "path": "../node_modules/bootstrap/dist",
    "main": "js/bootstrap.bundle.min",
    "deps": ["jquery"],
    "exports": "$",
    "resources": [
      "css/bootstrap.css"
    ]
  },

Answer 3

使用捆绑版本的 BS4 对我来说如下：-

移除弹出器npm uninstall popper.js

更新到 BS4 或更高版本npm install bootstrap --save

确保 jquery 已安装 npm install bootstrap --save

编辑“.angular-cli.json”以包含 jquery 和捆绑的 BS4

   "scripts": [
    "../node_modules/jquery/dist/jquery.slim.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
   ],

Answer 4

从最终版本 bootstrap 开始，下面的 4.0 是 bootstrap 与 popper

的工作配置

//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 月），无需使用前置方法

Answer 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>

Answer 6

对于新的 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

PS: 你当然需要安装bootstrap 4！这可能不完全是你的答案，但它可能对其他不使用 Aurelia CLI 和 Require.js

的人有很大帮助

Bootstrap 4 个错误 "Bootstrap dropdown require Popper.js"，使用 Aurelia CLI 和 Require.js

Bootstrap 4 error "Bootstrap dropdown require Popper.js", with Aurelia CLI and Require.js

requirejs

typescript

aurelia

bootstrap-4

=附录=