popper.js ใน bootstrap 4 ให้การส่งออกโทเค็นที่ไม่คาดคิดของ SyntaxError

ฉันลองติดตั้ง 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>

แต่เกิดข้อผิดพลาดต่อไปนี้:

Uncaught syntaxError: การส่งออกโทเค็นที่ไม่คาดคิด

มีความคิดอย่างไรในการแก้ไข

ฉันพบปัญหาเดียวกันหากฉันใช้ popper.js จากเครือข่าย CDN เช่น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 มีให้เลือกสามรุ่นสำหรับตัวโหลดโมดูลที่แตกต่างกันสามแบบ กล่าวโดยย่อ: หากคุณโหลดด้วย<script>แท็กคุณต้องใช้เวอร์ชันUMD คุณสามารถค้นหาได้ใน/dist/umd. ค่าเริ่มต้น (ใน/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 และลบ popper.js ใน html ของคุณได้

ไฟล์แถม JS ( bootstrap.bundle.jsและลดขนาดลงbootstrap.bundle.min.js) รวมถึง [ตกใจ] ( https://popper.js.org/ ) แต่ไม่jQuery

บรรทัด 96 ใน README

เป้าหมาย Dist

ปัจจุบัน Popper.js จัดส่งโดยมีเป้าหมาย 3 เป้าหมาย ได้แก่ UMD, ESM และ ESNext

• UMD - นิยามโมดูลสากล: AMD, RequireJS และ globals;
• ESM - โมดูล ES: สำหรับ webpack / Rollup หรือเบราว์เซอร์ที่รองรับข้อมูลจำเพาะ
• ESNext: Available in dist/สามารถใช้ได้กับ webpack และbabel-preset-env;

อย่าลืมใช้ให้ถูกกับความต้องการของคุณ หากคุณต้องการนำเข้าด้วย<script>แท็กให้ใช้ UMD

คุณมีโค้ดต่อไปนี้ในบันเดิล Bundle Config เพิ่ม (ScriptBundle ใหม่ ("~ / bundle / jquery") รวม ("~ / 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")

สิ่งนี้ได้ผลสำหรับฉัน