Aurelia CLIとRequire.jsを使用したBootstrap 4エラー「Bootstrap dropdown requires Popper.js」

Question

Aurelia CLIアプリケーション（v0.31.1）のrequirejsおよびTypeScriptを使用してブートストラップ4ベータを設定する際に問題があります。いくつかの設定変更を試した後、次のコンソールエラーが表示され続けます。

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が登録されていますブートストラップの前に
• UMDモジュールが使用されます。
• popper.jsは私のapp.tsで、

最後に、次のjQueryに、ブートストラップのための依存関係として設定されている：

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)

を、ブートストラップ4ドキュメントが唯一instructions on webpackに言及します。したがって、AureliaのGitter.im channelとStackOverflowの両方で検索します。 Require.jsでAurelia CLIに関するサンプルを見つけることができません。最後に、Googleがヒットしたのは、アルファ版（「ポッパー」ではなく「テザリング」に依存していた）を埋め込むための例だけを示しています。だから、

• 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を設定できますか（WebpackではなくRequire.jsを使用しています）。

ありがとうございました。

Answer 1

ベータのポッパーをテザーに置き換えました。

このように、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.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 2

で、他の依存関係のようにそれを含めることができます私のために次のように： -

削除ポッパーnpm uninstall popper.js

更新BS4への以降npm install bootstrap --save

最終ブートストラップのようjQueryとバンドルさBS4

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

Answer 3

を使用することによりBS4に組み込まれたバージョンを使用働い

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

Answer 4

を含めるようにjqueryのがインストールされていることを確認npm install bootstrap --save

編集 `.angular-cli.json」作る4.0未満でありますポッパーとブートストラップ用の作業confが

//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 
... 
], 

これは、最新のアウレリア&ブーツで動作します前払い方法を使わずにトラップする（2018年2月現在）