web-dev-qa-db-fra.com

Comment importer des fichiers popper.js?

Cela semble être une question boiteuse, mais je ne peux pas le comprendre. Comment importer un fichier popper.js fourni avec Bootstrap 4 beta?

J'utilise bower et j'ai installé Bootstrap 4 beta. Le dossier bower_components contient maintenant le répertoire popper.js, qui contient quelques sous-dossiers. Le problème est qu'il n'y a pas de dossier dist et de fichier popper.min.js. 

Liens du guide Bootstrap 4 vers CDN: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

Mais comment importer popper.js sans CDN? Où trouver le fichier popper.min.js?

EDIT: Même si je télécharge Zip depuis le site popper.js, il contient exactement les mêmes fichiers que ceux de bower.

javascriptbootstrap-4popper.js
19
Qrzysio

J'ai rencontré le même problème.

J'ai téléchargé le fichier 'popper.min.js' à partir du CDN sur le site Web de bootstrap.

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

Plus facile que de compiler le projet.

12
Zerus

Le moyen officiel d’installer Popper.js est npm, Yarn ou NuGet.

Utilisez l'une des commandes suivantes:

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

Tout est décrit dans le readme de la bibliothèque.

En ce qui concerne le "télécharge le Zip", le Zip indique clairement qu'il contient le code source de la bibliothèque.

Modifier :

À partir de la version 1.12.0, Popper.js est disponible en tant que dépendance Bower.

Cette méthode d'installation ne sera prise en charge que pour la version 1.x de Popper.js et sera supprimée dans 2.x.

Vous devez migrer la gestion de vos dépendances vers un système moderne tel que npm ou Yarn, comme Bower le suggère également.

10
Fez Vrasta

Je ne comprends vraiment pas pourquoi le monde Javascript essaie de faire des choses plus compliquées. Pourquoi ne pas simplement télécharger et inclure au format HTML? Essayer d'avoir quelque chose comme Maven en Java? Mais nous devons l'inclure manuellement en HTML quand même? Alors, quel est le point? Peut-être qu'un jour je comprendrai mais pas maintenant.

Voici comment je peux l'obtenir

  • télécharger et installer NodeJs
  • lancer "npm install popper.js --save"

  • alors je reçois ce message 

    [email protected]é 1 paquet dans 1.215s

  • alors où est "add package"? très informatif, non? Je l'ai trouvé dans mon répertoire C:\Users\surasin\node_modules\popper.js\dist

J'espère que cette aide

5
Surasin Tancharoen

J'ai eu le même problème. J'ai essayé différentes approches, mais celle-ci a fonctionné pour moi . Lisez les instructions de http://getbootstrap.com/ .

Copiez les chemins CDN des Javascripts (Popper, jQuery et Bootstrap) de la même manière (c’est important) comme indiqué.

 enter image description here 

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

2
MrGreen

ajoutez popper **. js ** comme dépendance au lieu de popper (uniquement): voyez la différence en gras.

yarn ajouter popper.js, au lieu de fil ajouter popper

ça fait la différence. 

et incluez le script selon vos besoins: 

html ou l’accès à la bibliothèque en tant que dépendance dans les applications SPA telles que react ou angular

0
andhdo

Vous pouvez télécharger et importer tous les fichiers Bootstrap et Popper avec une seule commande à l’aide de 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'
]));

Ajoutez des fichiers CSS si vous en avez aussi besoin. Ajustez les versions et les sources externes pour répondre à vos besoins et envisagez d'utiliser la vérification de l'intégrité des sous-ressources si vous n'hébergez pas les fichiers sur votre propre domaine ou si vous ne faites pas confiance à la source.

0
Josh Habdas