popper.js trong bootstrap 4 cho phép xuất mã thông báo không mong đợi SyntaxError

Tôi đã thử cài đặt bootstrap 4 và bao gồm các liên kết sau

<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>

Nhưng lỗi sau xảy ra:

Cú pháp không có sẵn Lỗi: Xuất mã thông báo không mong muốn

làm thế nào để khắc phục các ý tưởng đó?

Tôi gặp phải vấn đề tương tự nếu tôi sử dụng popper.js từ mạng CDN như cdnjs.

Nếu bạn quan sát mã nguồn của các Bootstrap 4ví dụ như Navbar ví dụ, bạn có thể thấy mã nguồn popper.min.jsđược tải từ:

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

Tôi đã đưa nó vào dự án của mình và lỗi đã biến mất. Bạn có thể tải xuống mã nguồn từ

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

và đưa vào dự án của bạn dưới dạng tệp cục bộ và nó sẽ hoạt động.

Tôi cũng hiểu điều này và tìm ra lý do tại sao nó thực sự xảy ra. Trong trường hợp những người khác đến đây:

Kiểm tra "Cách sử dụng" readme.md. Lib có sẵn trong ba phiên bản cho ba bộ tải mô-đun khác nhau. Tóm lại: nếu bạn tải nó bằng <script>thẻ thì bạn phải sử dụng phiên bản UMD . Bạn có thể tìm thấy nó trong /dist/umd. Mặc định (trong /dist) là ESNext (ECMA-Script) không thể tải bằng scriptthẻ.

Bootstrap 4 yêu cầu phiên bản UMD popper.jsvà đảm bảo thứ tự như sau:

<!-- 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>

Bạn cũng có thể thêm bootstrap.bundle.min.js và xóa popper.js trong html của mình.

Các tệp JS được gói ( bootstrap.bundle.jsvà được rút gọn bootstrap.bundle.min.js) bao gồm [Popper] ( https://popper.js.org/ ), nhưng không bao gồm jQuery .

Dòng 96 trong README

Mục tiêu phân khu

Popper.js hiện được vận chuyển với 3 mục tiêu: UMD, ESM và ESNext.

• UMD - Định nghĩa mô-đun chung: AMD, RequiJS và hình cầu;
• Mô-đun ESM - ES: Dành cho webpack / Rollup hoặc trình duyệt hỗ trợ thông số kỹ thuật;
• ESNext: Có sẵn dist/, có thể được sử dụng với webpack và babel-preset-env;

Đảm bảo sử dụng đúng loại cho nhu cầu của bạn. Nếu bạn muốn nhập nó bằng <script>thẻ, hãy sử dụng UMD.

Bạn có mã sau trong Bundle Config Bundles.Add (new ScriptBundle ("~ / Bundles / jquery"). Bao gồm ("~ / 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"));

mã sau trong html bố cục

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

Điều này đã làm việc cho tôi