Как импортировать popper.js?

Это, кажется, хромой вопрос, но я не могу это понять. Как импортировать popper.js, который поставляется с бета-версией Bootstrap 4?

Я использую беседу, и я установил бета-версию Bootstrap 4. Теперь в папке bower_components находится каталог popper.js, который содержит несколько popper.js. Проблема в том, что нет папки dist и файла popper.min.js.

Bootstrap 4 содержит ссылки на CDN: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

Но как импортировать popper.js без CDN? Где найти файл popper.min.js?

EDIT: Даже если я загружаю zip с сайта popper.js, он содержит точно такие же файлы, как и у bower.

Ответы

Ответ 1

Я столкнулся с той же проблемой.

Я загрузил файл popper.min.js из CDN на веб-сайте начальной загрузки.

См. Здесь: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

Легче компилировать проект.

Ответ 2

Официальный способ установить Popper.js - это npm, Yarn или NuGet.

Используйте одну из следующих команд:

npm i popper.js
yarn add popper.js
PM> Install-Package popper.js

Все описано в библиотеке readme.

Что касается "загрузки zip", zip четко заявляет, что он содержит исходный код библиотеки.

Изменить:

Начиная с версии 1.12.0, Popper.js доступен как зависимость Bower.

Этот метод установки будет поддерживаться только для версии 1.x Popper.js и будет удален в 2.x

Вы должны перенести управление зависимостями на современную систему, такую как npm или пряжа, как предлагает Bower.

Ответ 3

Способы получения popper.js: пакет, CDN и локальный файл

Лучший способ зависит от того, есть ли у вас проект с менеджером пакетов, например, npm.

Менеджер пакетов
Если вы используете менеджер пакетов, используйте его для получения popper.js следующим образом:

npm install popper.js --save

CDN
Для прототипа или игровой среды (например, http://codepen.io) или может потребоваться ссылка на файл 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 4 требуются версии по пути umd path (дополнительная информация о popper/bs4).

Локальный файл

Просто сохраните один из файлов CDN для локального использования. Например, вставьте один из этих URL в браузер, затем "Сохранить как...", чтобы получить локальную копию.

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

Ответ 4

Я действительно не понимаю, почему мир Javascript пытается сделать что-то более сложным. Почему бы просто не скачать и не включить в html? Попытка иметь что-то вроде Maven в Java? Но мы все равно должны вручную включать его в html? Итак, в чем смысл? Может быть, когда-нибудь я пойму, но не сейчас.

Вот как я могу это получить

загрузить и установить NodeJs
запустить "npm install popper.js --save"
то я получаю это сообщение

[email protected] добавлено 1 пакет в 1.215s
то где "добавить пакет"? очень информативный, не так ли? Я нашел его в своем C:\Users\surasin\node_modules\popper.js\dist

Надеюсь, что эта помощь

Ответ 5

У меня такая же проблема. Пробовал разные подходы, но этот работал для меня. Прочтите инструкцию от 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>

Ответ 6

Вы можете загружать и импортировать все Bootstrap и Popper с помощью одной команды с использованием Fetch Injection:

fetchInject([
  'https://npmcdn.com/[email protected]/dist/js/bootstrap.min.js',
  'https://cdn.jsdelivr.net/popper.js/1.0.0-beta.3/popper.min.js'
], fetchInject([
  'https://cdn.jsdelivr.net/jquery/3.1.1/jquery.slim.min.js',
  'https://npmcdn.com/[email protected]/dist/js/tether.min.js'
]));

Добавьте файлы CSS, если вам тоже нужны. Отрегулируйте версии и внешние источники в соответствии с вашими потребностями и рассмотрите возможность проверки целостности под-ресурсов, если вы не размещаете файлы в своем собственном домене или не доверяете источнику.

Ответ 7

добавить popper **. js ** в качестве зависимости вместо popper (только): см. разницу в жирном шрифте.

пряжа добавить popper.js, вместо пряжи добавить поппер

это имеет значение.

и включите скрипт в соответствии с вашими потребностями:

как HTML или доступ к библиотеке в качестве зависимости в приложениях SPA, таких как реакция или угловая

Ответ 8

Я удалил все существующие каталоги popper, затем запустил

npm install --save popper.js angular-popper

Ответ 9

В bootstrap 4 вам нужно добавить popper js для всплывающей подсказки, я также не понимаю, почему bootstrap 4 включает в себя внешний файл popper.js. Это означает, что bootstrap усложняет, а не упрощает при обновлении до последних версий.

Вы можете импортировать popper js перед начальной загрузкой на angular или на простом html, Angular import будет выглядеть так

npm install popper.js --save

затем перейдите к .angular-cli.json и измените порядок, как показано ниже.

 "scripts": [
        "../node_modules/jquery/dist/jquery.slim.min.js",
        "../node_modules/tether/dist/js/tether.min.js", 
        "../node_modules/popper.js/dist/umd/popper.js",              
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

вы также можете использовать прямой вызов CDN js в любом проекте.

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

Ответ 10

Оказывается, Popper.js не предоставляет скомпилированные файлы в своем репозитории GitHub. Поэтому нужно скомпилировать проект самостоятельно или загрузить скомпилированные файлы из CDN. Его нельзя автоматически импортировать.