Как использовать 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;

Ответы

Ответ 1

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

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

Что такое UMD?

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

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

Ответ 3

Поппер требует, чтобы вы использовали файл под 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

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

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

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

Ответ 4

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

Скопируйте пути CDN Javascripts (Popper, jQuery и Bootstrap) таким же образом (это важно), как указано.

введите описание изображения здесь

<head>
//Path to jQuery
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

////Path to Popper - it is for dropsdowns etc in bootstrap
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>

//Path to bootsrap
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>