Bootstrap 4 錯誤“Bootstrap dropdown require 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 在引導前注冊
• 使用 UMD 模塊
• popper.js 設置為 bootstrap 的依賴項，在 jquery 旁邊

最后，在我的app.ts 中：

import 'bootstrap';

使用此配置，使用au build工作正常。 但是在運行時，使用au run --watch我收到以下控制台錯誤：

未捕獲的錯誤：Bootstrap 下拉菜單需要 Popper.js ( https://popper.js.org ) (defaults.js:19)
未捕獲的錯誤：Bootstrap 下拉菜單需要 Popper.js ( https://popper.js.org ) (bootstrap.min.js:6)
……再進一步：
未捕獲的類型錯誤：plugin.load 不是模塊中的函數。 (defaults.js:19)

不幸的是，Bootstrap 4 文檔只提到了關於 webpack 的說明。 在 Aurelia 的Gitter.im 頻道和 StackOverflow 上進行搜索也是如此。 我找不到有關帶有 Require.js 的 Aurelia CLI 的示例。 最后，Google hits 僅顯示了嵌入 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。

因此，您需要將 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"
 },

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

添加您的代碼。

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

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

移除 popper 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 5

從下面的最終引導程序 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
...
],

這適用於最新的 aurelia 和 bootstrap（截至 2018 年 2 月），而無需使用 prepend 方法

Answer 6

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

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

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

PS：當然需要安裝bootstrap 4！ 這可能不完全是您的答案，但它可能對不使用 Aurelia CLI 和 Require.js 的其他人有很大幫助