web-dev-qa-db-ja.com

Bootstrap 4 betaでPopper.jsを使用する方法

私は昔の学校なので、ソースコードを1.12.0にダウンロードしてから、次のようにしました。

<script src="/popper.js-1.12.0/dist/popper.js"></script>
<script src="/bootstrap-4.0.0-beta/dist/js/bootstrap.js"></script>

しかし、私はなってきました：

Uncaught SyntaxError: Unexpected token export

2294行の次のようになります。

export default Popper;
bootstrap-4popper.js
59
Phillip Senn

package.jsonファイルにmainエントリ で指定されているdistターゲットを使用します。

この場合、あなたはumd build（ dist/umd/popper.js ）を探しています。

UMDとは

MDパターン は通常、その日の最も人気のあるスクリプトローダーとの互換性を提供しようとします（例えばRequireJSなど）。多くの場合、ベースとしてAMDを使用し、CommonJSとの互換性を処理するために特別な大文字と小文字の区別が追加されています。

つまり、UMDバンドルは<script>タグを介してロードでき、グローバルスコープ（window）内に挿入できますが、RequireJSなどのCommonJSローダーを使用しても必要に応じて機能します。

99
Fez Vrasta

Popperでは、Bootstrap 4でumdパスの下のファイルを使用する必要があります。

これらのCDNバージョンのどちらでも動作します。

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.jshttps://cdnjs.cloudflare.com/ajax/ libs/popper.js/1.12.5/umd/popper.min.js

他の回答/コメントはバージョンについて言及していますが、問題はバージョン管理に関連していません。

Bootstrapのpopperを含む例 を使うのは決して悪い習慣ではありません。現在のBootstrap 4は安全な選択であるpopper 1.11を推奨しています、しかしバージョン1.12.5も同様にうまくいくはずです。

サイドノート：なぜumd、esm、そして普通の 'popper'ファイルと混同されるのですか？その意図は柔軟なモジュールパッケージングですが、実際にはもっと簡単にすることができます。 この記事 新しいモジュールタイプに関する問題のいくつかを説明しています。

20
whitneyland

Bootstrapのドキュメントで参照されているPopper.jsバージョンを必ず使用してください。

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

12
Zim

popper docs に従って：

Popper.jsは現在、UMD、ESM、ESNextの3つのターゲットを念頭に置いて出荷されています。

UMD - ユニバーサルモジュールの定義：AMD、RequireJS、およびグローバル。

ESM - ESモジュール：仕様をサポートするwebpack/Rollupまたはブラウザ用。

ESNext：dist /で利用可能で、webpackとbabel-preset-envで使用できます。必要に応じて適切なものを使用してください。タグ付きでインポートしたい場合は、UMDを使用してください。

6
Shivam

ブートストラップのバンドル版とあなたの良いものを使用するだけです。

<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<!-- <script src="./node_modules/popper.js/dist/popper.min.js"></script> -->
<!-- <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
1
Valmor Nascimento

私は同じ問題を抱えていました。さまざまな方法を試してみましたが、これは私にとって役に立ちました。 http://getbootstrap.com/ から説明を読んでください。

CDNリンク（jQuery、Popper、Bootstrap）を同じ順序でコピーします（重要です）。

Bootstrap CDN links

<head>
  <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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
1
MrGreen

フェズブラスタに従って。

Visual Studio内のNuGet Package Managerからpopperを取得する場合は、popper.jsスクリプトの参照パスがmdフォルダーを使用していることを確認してください。

MVC ASP.Net BundleConfigの例：

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/umd/popper.js", //path with umd
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

直接のスクリプト参照例

<script src="~/Scripts/umd/popper.js" type="text/javascript"></script>
1
Kellie

別のコンテナ：

あなたが受け入れられた答えに従ってもあなたのツールチップがまだ間違った場所にあるなら、それはおそらくあなたがそれぞれのツールチップのために異なるコンテナを持っているからです。

これを試して、ツールチップを配置できるようにします要素の親の近く：

const initializeTooltips = function () {
    $('[data-toggle="tooltip"]').each(function() {
        $(this).tooltip({container: $(this).parent()});
    });
};
$(document).ready(function () {
    initializeTooltips();
});

自分で試してみてください jsfiddle 。

0
Daniel Schetritt