Как использовать Popper.js с Bootstrap 4 beta

Я старая школа, поэтому я скачал исходный код в 1.12.0, а затем сделал следующее:

<script src="/popper.js-1.12.0/dist/popper.js"></script>
<script src="/bootstrap-4.0.0-beta/dist/js/bootstrap.js"></script>

Но я получаю:

Uncaught SyntaxError: Unexpected token export

онлайн 2294 где сказано:

export default Popper;
Источник

6 ответов

Решение

Вы хотите использовать цель dist, указанную в package.json подать как main запись

В этом случае вы ищетеumdпостроить (dist/umd/popper.js)

Что такое УМД?

Шаблон UMD обычно пытается обеспечить совместимость с наиболее популярными загрузчиками сценариев того времени (например, RequireJS среди прочих). Во многих случаях он использует AMD в качестве базы со специальным корпусом, добавленным для поддержки совместимости с CommonJS.

Это означает, что пакет UMD может быть загружен через <script> пометить и получить внутри глобальной области видимости (window), но также работает при необходимости с загрузчиком CommonJS, таким как RequireJS.

Источник

Поппер требует, чтобы вы использовали файл по пути umd с Bootstrap 4.

Любая из этих версий CDN будет работать:

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.min.js

Другие ответы / комментарии упоминают версию, однако проблема не связана с управлением версиями.

Использование Bootstrap в качестве примера добавления поппера никогда не является плохой практикой, потому что оно всегда должно работать. Bootstrap 4 на данный момент рекомендует popper 1.11, который является безопасным выбором, однако версия 1.12.5 также должна работать нормально.

Примечание: почему путаница с файлами umd, esm и plain ol 'popper? Намерение - гибкая упаковка модулей, но на самом деле это можно сделать проще. Этот пост объясняет некоторые проблемы с новыми типами модулей.

Источник

Убедитесь, что вы используете версию Popper.js, указанную в документации по Bootstrap.

https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

Источник

Согласно документам Поппера:

Popper.js в настоящее время поставляется с 3 целями: UMD, ESM и ESNext.

UMD - универсальный модуль определения: AMD, RequireJS и глобалы;

ESM - ES Modules: для веб-пакетов / накопительных пакетов или браузеров, поддерживающих спецификации;

ESNext: доступен в dist/, может использоваться с webpack и babel-preset-env; Убедитесь, что вы используете именно тот, который вам нужен. Если вы хотите импортировать его с тегом, используйте UMD.

Источник

Просто используйте пакетную версию bootstrap и ваш товар!

<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<!-- <script src="./node_modules/popper.js/dist/popper.min.js"></script> -->
<!-- <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
<script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
Источник

Согласно Фес Враста.

Если вы извлекаете popper с помощью диспетчера пакетов NuGet в Visual Studio, убедитесь, что в пути ссылки на скрипт popper.js используется папка umd:

Пример MVC ASP.Net BundleConfig:

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

Пример прямой ссылки на скрипт:

<script src="~/Scripts/umd/popper.js" type="text/javascript"></script>
Источник

У меня такая же проблема. Пробовал разные подходы, но этот работал для меня. Прочитайте инструкцию от http://getbootstrap.com/.

Скопируйте ссылки CDN (jQuery, Popper и Bootstrap) в том же порядке (это важно), как указано.

Bootstrap CDN ссылки

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
Источник

Отдельные контейнеры:

Если вы следовали принятому ответу и ваши подсказки все еще находятся не в том месте, это может быть связано с тем, что у вас есть разные контейнеры для каждой подсказки.

Я бы попробовал это, чтобы позволить всплывающей подсказке располагаться рядом с родителем элемента:

const initializeTooltips = function () {
    $('[data-toggle="tooltip"]').each(function() {
        $(this).tooltip({container: $(this).parent()});
    });
};
$(document).ready(function () {
    initializeTooltips();
});

Попробуйте сами на jsfiddle.

Источник
Другие вопросы по тегам