引導程序4中的popper.js提供了SyntaxError意外的令牌導出

Question

我嘗試安裝Bootstrap 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>

但是發生以下錯誤：

語法錯誤：意外的令牌導出

任何想法如何解決？

Answer 1

剛得到這個，並弄清楚為什么它真的發生了。 如果其他人到這里來：

檢查readme.md“用法”。 該庫提供了三個版本，可用於三個不同的模塊加載器。 簡而言之：如果使用<script>標簽加載它，則必須使用UMD版本。 您可以在/dist/umd找到它。 默認值（在/dist ）是ESNext （ECMA腳本），無法使用script標記加載。

Answer 2

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>

Answer 3

如果我使用CDN網絡（如cdnjs popper.js，則會遇到相同的問題。

如果您觀察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

並以本地文件的形式包含在您的項目中，並且可以正常工作。

Answer 4

您也可以在HTML中添加bootstrap.bundle.min.js並刪除popper.js。

捆綁的JS文件（ bootstrap.bundle.js和縮小的bootstrap.bundle.min.js ） 包括[Popper] （ https://popper.js.org/ ），但不包括jQuery 。

Answer 5

您在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")

這對我有用

Answer 6

自述文件中的第96行

距離目標

Popper.js當前附帶三個目標：UMD，ESM和ESNext。

• UMD-通用模塊定義：AMD，RequireJS和全局變量；
• ESM-ES模塊：適用於支持規格的webpack / Rollup或瀏覽器；
• ESNext：在dist/可用，可與webpack和babel-preset-env ；

確保使用適合您需求的產品。 如果要使用<script>標記導入，請使用UMD。