Bootstrap 4错误"Bootstrap下拉需要Popper.js",使用Aurelia CLI和Require.js

Question

我在使用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)？

谢谢.

Answer 1

波普尔在测试版中取代了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"
 },

Answer 2

我卸载了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"
    ]
  },

Answer 3

添加您的代码。

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