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

Question

提问by Juli?n

I'm having trouble configuring Bootstrap 4 beta in an Aurelia CLI app (v0.31.1) with requirejs and using TypeScript. After having tried several config variations I keep on getting the following console error:

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

Uncaught Error: Bootstrap dropdown require Popper.js

未捕获的错误：Bootstrap 下拉菜单需要 Popper.js

Here are the steps to reproduce. First, install the packages:

以下是重现的步骤。首先，安装软件包：

$ npm install --save jquery [email protected] popper.js

Next, I've configured aurelia.json:

接下来，我配置了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"
    ]
  }

Notice in the config above that:

注意上面的配置：

popper.js is registered before bootstrap
the UMD module is used
popper.js is set as a dependency for bootstrap, next to jquery

popper.js 在引导前注册
使用 UMD 模块
popper.js 设置为 bootstrap 的依赖项，在 jquery 旁边

Finally, in my app.ts:

最后，在我的app.ts 中：

import 'bootstrap';

With this configuration, building using au buildworks fine. But upon running, using au run --watchI get the following console errors:

使用此配置，构建 usingau 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)

未捕获的错误：引导下拉菜单需要 Popper.js ( https://popper.js.org) (defaults.js:19)
未捕获的错误：引导下拉菜单需要 Popper.js ( https://popper.js.org) (bootstrap.js :19) min.js:6)
... 更进一步：
Uncaught TypeError: plugin.load is not a function at Module。(defaults.js:19)

Unfortunately, the Bootstrap 4 docs only mention instructions on webpack. So does a search on both Aurelia's Gitter.im channeland on StackOverflow. I cannot find samples regarding Aurelia CLI with Require.js. Finally, Google hits shows only examples for embedding the alpha versions (which relied on 'tethering' rather than 'popper').

不幸的是，Bootstrap 4 文档只提到了关于 webpack 的说明。在 Aurelia 的Gitter.im 频道和 StackOverflow上进行搜索也是如此。我找不到有关带有 Require.js 的 Aurelia CLI 的示例。最后，Google hits 仅显示了嵌入 alpha 版本的示例（依赖于“tethering”而不是“popper”）。

Similar questions on SO, which have the same error but aren't applicable to my situation:

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

So, my question: how can I configure Bootstrap 4 with Popper.js in an Aurelia CLI app (using Require.js, not Webpack)?

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

Thanks.

谢谢。

Answer 1

采纳答案by 4imble

Popper replaced Tether in the beta.

波普尔在测试版中取代了 Tether。

As such you will need to swap out tether with popper (or just add it if you never had the alpha) to the prepend section of your aurelia.json file. (Make sure you link to the UMD version seen below)

因此，您需要将 tether 与 popper 交换（或者，如果您从未使用过 alpha，则只需添加它）到您的 aurelia.json 文件的 prepend 部分。（确保您链接到下面看到的 UMD 版本）

"prepend": [
   ...
          "node_modules/jquery/dist/jquery.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
   ...
     ]

You will also need the bundling as expected, something like this:

您还需要按预期进行捆绑，如下所示：

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

=Addendum=

=附录=

Unlike tether, popper does not need to be prepended it seems. So you could include it like any other dependency with

与 Tether 不同，popper 似乎不需要预先添加。所以你可以像任何其他依赖一样包含它

 {
     "name": "popper.js",
     "path": "../node_modules/popper.js/dist/umd",
     "main": "popper.min"
 },

Answer 2

回答by smoore4

I uninstalled popper.js and used the version built into bs4 by using js/bootstrap.bundle.mininstead of js/bootstrap.min

我卸载了 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

回答by Tim Tharratt

Using the bundled version of BS4 worked for me as follows :-

使用捆绑版本的 BS4 对我有用，如下所示：-

Remove popper npm uninstall popper.js

删除popper npm uninstall popper.js

Update to BS4 or later npm install bootstrap --save

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

Make sure jquery is installed npm install bootstrap --save

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

Edit `.angular-cli.json' to include jquery and bundled BS4

编辑 `.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

回答by Diogo Santos

Add in your code.

添加您的代码。

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

回答by Allart

With the new bootstrap 4 you can just include this:

使用新的引导程序 4，您可以只包含以下内容：

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

Popper.js is already included in this file. Check bootstrap documentation dropdowns: https://getbootstrap.com/docs/4.0/components/dropdowns/#overview

Popper.js 已包含在此文件中。检查引导程序文档下拉列表：https: //getbootstrap.com/docs/4.0/components/dropdowns/#overview

PS: You need to install bootstrap 4 ofcourse! It might not be exactly your answer but it might help alot for other people who aren't using Aurelia CLI and Require.js

PS：当然需要安装bootstrap 4！这可能不完全是您的答案，但它可能对不使用 Aurelia CLI 和 Require.js 的其他人有很大帮助

Answer 6

回答by Waku-2

as of final bootstrap 4.0 below is the working conf for bootstrap with popper

从下面的最终引导程序 4.0 开始，是带有 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
...
],

This works with latest aurelia & bootstrap (as of 2018-Feb) without using the prepend method

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

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

提问by Juli?n

采纳答案by 4imble

=Addendum=

=附录=

回答by smoore4

回答by Tim Tharratt

回答by Diogo Santos

回答by Allart

回答by Waku-2

相关推荐

最近更新

标签

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

提问by Juli?n

采纳答案by 4imble

=Addendum=

=附录=

回答by smoore4

回答by Tim Tharratt

回答by Diogo Santos

回答by Allart

回答by Waku-2

相关推荐

Windows 命令解释器 (CMD.EXE) 如何解析脚本？

切换 VS2010 以使用 Windows 7.1 SDK

如何在 TypeScript 中检查运行时的对象类型？

windows 作为网络服务的交互式命令提示符

相关推荐

最近更新

标签