Requirejsを使用し、TypeScriptを使用してAurelia CLIアプリ(v0.31.1)でBootstrap 4 betaを構成するのに問題があります。いくつかの構成バリエーションを試した後、次のコンソールエラーが表示されます
不明なエラー:BootstrapドロップダウンにはPopper.jsが必要です
再現する手順は次のとおりです。まず、パッケージをインストールします。
$ npm install --save jquery [email protected] 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"
]
}
上記の設定で次のことに注意してください。
最後に、myapp.ts:
import 'bootstrap';
この構成では、au build
正常に動作します。しかし、実行時に、au run --watch
次のコンソールエラーが表示されます。
不明なエラー:BootstrapドロップダウンにはPopper.jsが必要です( https://popper.js.org )(defaults.js:19)
Uncaught Error:Bootstrap dropdown require Popper.js( https://popper.js.org )(bootstrap.min.js:6)
...少し先:
Uncaught TypeError:plugin.loadはモジュールの関数ではありません。 (defaults.js:19)
残念なことに、Bootstrap 4ドキュメントは webpackの指示 のみに言及しています。Aureliaの Gitter.imチャンネル とStackOverflowの両方での検索も同様です。 Require.jsでAurelia CLIに関するサンプルを見つけることができません最後に、Googleヒットは、アルファ版(「ポッパー」ではなく「テザリング」に依存)を埋め込む例のみを示しています。
SOに関する同様の質問。同じエラーがありますが、私の状況には当てはまりません。
それで、私の質問:Aurelia CLIアプリでPopper.jsを使用してBootstrap 4を構成するにはどうすればよいですか(WebpackではなくRequire.jsを使用)?
ありがとう。
Popperはベータ版でTetherを置き換えました。
そのため、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"
]
}
テザーとは異なり、ポッパーは先頭に追加する必要はありません。したがって、他の依存関係と同様にそれを含めることができます
{
"name": "popper.js",
"path": "../node_modules/popper.js/dist/umd",
"main": "popper.min"
},
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"
]
},
コードを追加します。
<!-- 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>
バンドル版のBS4を使用すると、次のように機能しました。
ポッパーを削除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"
],
最終的なbootstrap 4.0以下は、bootstrap with 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メソッドを使用せずに