typescript - 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 。在 Aurelia 的 Gitter.im channel 和 StackOverflow 上搜索也是如此。我找不到关于 Aurelia CLI with Require.js 的示例。最后，Google hits 仅显示嵌入 alpha 版本的示例(它依赖于“tethering”而不是“popper”)。

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

• 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)？

谢谢。

Answer 1

Popper 在测试版中取代了 Tether。

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