问题
It seems to be a lame question, but I cannot to figure it out. How to import popper.js which comes toghether with Bootstrap 4 beta?
I use bower and I've installed Bootstrap 4 beta. Now in bower_components folder there is popper.js directory, which contains a few sub-folders. The problem is there is no dist folder and popper.min.js file.
Bootstrap 4 guide links to CDN: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
But how to import popper.js without CDN? Where to find popper.min.js file?
EDIT: Even if I download zip from popper.js website it contains exactly the same files as from bower.
回答1:
I ran into the same problem.
I downloaded the 'popper.min.js' file from the CDN on the bootstrap website.
See here: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
Easier than compiling the project.
回答2:
The official way to install Popper.js is trough npm, Yarn or NuGet.
Use either one of the following commands :
npm i popper.js
yarn add popper.js
PM> Install-Package popper.js
Everything is described in the library readme.
Regarding the "downloads the zip", the zip clearly states that it contains the source code of the library.
Edit:
Starting from version 1.12.0, Popper.js is available as Bower dependency.
This installation method is going to be supported only for the 1.x version of Popper.js and will be removed in 2.x.
You should migrate your dependencies management to a modern system like npm or Yarn, as Bower suggests as well.
回答3:
Ways to get popper.js: Package, CDN, and Local file
The best way depends on whether you have a project with a package manager like npm.
Package manager
If you're using a package manager, use it to get popper.js like this:
npm install popper.js --save
CDN
For a prototype or playground environment (like http://codepen.io) or may just want a url to a CDN file:
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
note: Bootstrap 4 requires the versions under the umd path (more info on popper/bs4).
Local file
Just save one of the CDN files to use locally. For example, paste one of these URLs in a browser, then Save As... to get a local copy.
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:
I had the same problem. Tried different approches, but this one worked for me. Read the instruction from http://getbootstrap.com/.
Copy the CDN paths of Javascripts (Popper, jQuery and Bootstrap) in same manner (it is important) as given.
<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>回答5:
I really don't understand why Javascript world trying to do thing more complicated. Why not just download and include in html? Trying to have something like Maven in Java? But we have to manually include it in html anyway? So, what is the point? Maybe someday I will understand but not now.
This is how I can get it
- download & install NodeJs
- run "npm install popper.js --save"
then I get this message
popper.js@1.12.7 added 1 package in 1.215s
then where is "add package" ? very informative , right? I found it in my C:\Users\surasin\node_modules\popper.js\dist
Hope this help
回答6:
You can download and import all of Bootstrap, and Popper, with a single command using Fetch Injection:
fetchInject([
'https://npmcdn.com/bootstrap@4.0.0-alpha.5/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/tether@1.2.4/dist/js/tether.min.js'
]));
Add CSS files if you need those too. Adjust versions and external sources to meet your needs and consider using sub-resource integrity checking if you're not hosting the files on your own domain or don't trust the source.
回答7:
add popper**.js** as dependency instead of popper (only): see the difference in bold.
yarn add popper.js , instead of yarn add popper
it makes the difference.
and include the script according your needs:
as html or the library access as a dependency in SPA applications like react or angular
回答8:
I deleted any existing popper directories, then ran
npm install --save popper.js angular-popper
回答9:
IN bootstrap 4 you need to add popper js for tooltip, I also don`t understand why bootstrap 4 includes external popper.js, It means bootstrap makes more complicated instead of easy when upgrading to the latest versions.
You can import popper js before bootstrap on angular or a simple html, Angular import would be like this
npm install popper.js --save
then go to .angular-cli.json and change the order like below.
"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"
],
you can also use CDN direct call popper js into your any project.
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:
It turns out that Popper.js doesn't provide compiled files on its GitHub repository. Therefore, one has to compile the project on his/her own or download compiled files from CDNs. It cannot be automatically imported.
来源：https://stackoverflow.com/questions/45650583/how-to-import-popper-js