bootstrap 4'teki popper.js, SyntaxError Beklenmeyen token dışa aktarımı veriyor

99

Bootstrap 4'ü yüklemeyi denedim ve aşağıdaki bağlantıları dahil ettim

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

Ancak aşağıdaki hata oluşur:

Yakalanmamış sözdizimi Hatası: Beklenmeyen belirteç dışa aktarma

Bunun nasıl tamir edileceğine dair fikri olan?

— Павел Шиляев
kaynak

Bilmiyorum, bootstrap dosyası bunu gerektiriyor

— Павел Шиляев

hayır Bootstrap kullandım ama bana hiç sormadı

— Ashish sah

1

son sürüm soruldu

— Павел Шиляев

Eğer öyleyse, o zaman CDN bağlantılarını kullanmayı söyleyeceğim

— Ashish sah

sorun şu ki, piyasada yüksek sesle CDN bağlantılarını kullanmamam gerekiyor

— Павел Шиляев

34

CDN ağından popper.js kullanırsam aynı sorunla karşılaştım cdnjs.

Bootstrap 4Örneğin Navbar gibi örneklerin kaynak kodunu gözlemlerseniz, bunun popper.min.jsşuradan yüklendiğini görebilirsiniz:

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

Bunu projeme dahil ettim ve hata gitti. Kaynak kodunu şuradan indirebilirsiniz:

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

ve projenize yerel bir dosya olarak ekleyin ve çalışmalıdır.

— Phani Kumar M
kaynak

Evet. Haklısın. Bu kodu kopyalayıp yapıştırdım ve hata kayboluyor. CDN,popper.js

— Fabrizio Bertoglio

2

Çalışsa da, BootStrap ekibi kendi kodunu güncelleyene kadar bunun doğru bir yol olmadığını düşünüyorum.

— Nadeem Jamali

8

Yukarıdaki URL, bulunamadı hatası (404) döndürür. Bootstrap 4.1.3 için getbootstrap.com/docs/4.1/assets/js/vendor/popper.min.js kullandım ve bu benim için sorunu çözdü.

— Mike Strother

1

Bu cevapta önerilen tekniği kullanmak hareketli bir hedefi kovalamaya benzer. Doğru cevabı Marc ve Zim veriyor.

— nagu

maalesef bu artık çalışmıyor. Hata gitti, ancak araç ipucu varsayılan HTML araç ipucu

— deanwilliammills

244

Bunu da aldım ve neden gerçekten olduğunu anladım. Başkalarının buraya gelmesi durumunda:

Readme.md "Kullanımını" kontrol edin. Kitaplık, üç farklı modül yükleyici için üç versiyonda mevcuttur. Kısacası: <script>etiketi ile yüklerseniz , UMD sürümünü kullanmanız gerekir . İçinde bulabilirsiniz /dist/umd. Varsayılan (in /dist), etiket kullanılarak yüklenemeyen ESNext (ECMA-Script) 'dir script.

— Marc
kaynak

5

Teşekkür ederim. Umd dosyasına geçerek benim için hatadan kurtuldum.

— user1500321

4

— Umd

16

Bu cevap kabul edilmiş olmalıydı. Harika. Paylaştığınız için çok teşekkürler.

— Ajay Kumar

3

Yukarıdaki gibi, gerçek cevap budur.

— Ron

1

Hızlı yardım için harika, teşekkürler. Bu / umd ve / esm klasörlerinin ne olduğunu merak ediyordum ama Google iyi sonuçlar vermiyor.

— Blackbam

88

Bootstrap 4, UMD sürümünü gerektirir ve popper.jssıranın aşağıdaki gibi olduğundan emin olun:

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

— Zim
kaynak

UMD sürümü, hatayı kaldıran tek CDN bağlantısıdır.

— nyusternie

Teşekkürler dostum! Siparişiniz sorunumu çözdü. Şerefe!

— Noobie

17

Ayrıca bootstrap.bundle.min.js ekleyebilir ve html'nizdeki popper.js'yi kaldırabilirsiniz.

Paketlenmiş JS dosyaları ( bootstrap.bundle.jsve küçültülmüş bootstrap.bundle.min.js) [Popper] ( https://popper.js.org/ ) içerir, ancak jQuery içermez .

— web geliştiricisi086
kaynak

2

bootstrap.bundle.min.jsdahilpopperjs

— vuhung3990

Ek Popper.js kitaplığının kullanılmasını gerektirmediğinden en iyi yanıt

— BuddyZ

10

README'deki 96. satır

Dist hedefleri

Popper.js şu anda akılda 3 hedef ile gönderilmektedir: UMD, ESM ve ESNext.

UMD - Evrensel Modül Tanımı: AMD, RequireJS ve globaller;
ESM - ES Modülleri: Web paketi / Toplama veya spesifikasyonu destekleyen tarayıcı için;
ESNext: Webpack dist/ile kullanılabilir ve babel-preset-env;

İhtiyaçlarınız için doğru olanı kullandığınızdan emin olun. Bir <script>etiketle içe aktarmak istiyorsanız , UMD'yi kullanın.

— Rob
kaynak

UMD dizininde bulunan popper.min.js dosyasını kullanmak, popper'ı npm aracılığıyla kurarken verdiğim sorunu çözdü. Teşekkür ederim!

— Kickin_Wing

6

Bundle Config bundles.Add (yeni 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"));

layout html'de aşağıdaki kodu

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

Bu benim için çalıştı

— ycs
kaynak