ブートストラップ4のpopper.jsはSyntaxErrorを提供します予期しないトークンのエクスポート

ブートストラップ4をインストールしてみましたが、次のリンクが含まれていました

<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/tether/dist/js/tether.min.js" ></script>
<script src="libs/popper.js/dist/popper.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js" ></script>

ただし、次のエラーが発生します。

キャッチされない構文エラー：予期しないトークンのエクスポート

それを修正する方法はありますか？

のようなCDNネットワークからpopper.jsを使用すると、同じ問題が発生しましたcdnjs。

Bootstrap 4たとえばNavbarのような例のソースコードを観察すると、次の場所popper.min.jsからロードされていることがわかります。

<script src="https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js"></script>

それをプロジェクトに含めたところ、エラーはなくなりました。ソースコードはからダウンロードできます

https://getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js

プロジェクトにローカルファイルとして含めると、機能するはずです。

これも手に入れて、なぜそれが実際に起こるのかを理解しました。他の人がここを通り抜ける場合：

readme.mdの「使用法」を確認してください。libは、3つの異なるモジュールローダー用に3つのバージョンで利用できます。つまり、<script>タグを付けてロードする場合は、UMDバージョンを使用する必要があります。あなたはそれを見つけることができます/dist/umd。デフォルト（in /dist）はESNext（ECMA-Script）であり、scriptタグを使用してロードすることはできません。

Bootstrap 4にはのUMDバージョンが必要でありpopper.js、順序が次のとおりであることを確認してください。

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script src="~/Scripts/umd/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

また、bootstrap.bundle.min.jsを追加し、htmlからpopper.jsを削除することもできます。

バンドルされているJSファイル（bootstrap.bundle.jsおよび縮小bootstrap.bundle.min.js）には[Popper]（https://popper.js.org/）が含まれていますが、jQueryは含まれていません。

READMEの96行目

遠方のターゲット

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

• UMD-ユニバーサルモジュール定義：AMD、RequireJS、およびグローバル。
• ESM-ESモジュール：仕様をサポートするwebpack / Rollupまたはブラウザー用。
• ESNext：で利用可能でdist/、webpackおよびbabel-preset-env;で使用できます。

ニーズに合ったものを使用してください。<script>タグ付きでインポートする場合は、UMDを使用してください。

Bundle Config bundles.Add（new ScriptBundle（ "〜/ bundles / jquery"）。Include（ "〜/ Scripts / jquery- {version} .js"））;に次のコードがあります。

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

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

レイアウトhtmlの次のコード

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")

これは私のために働いた