Wie importiere ich popper.js?
Es scheint eine lahme Frage zu sein, aber ich kann es nicht herausfinden. Wie importiere ich popper.js, das zusammen mit Bootstrap 4 beta geliefert wird?
Ich benutze Bower und habe Bootstrap 4 Beta installiert. Nun befindet sich im Ordner bower_components das Verzeichnis popper.js, das einige Unterordner enthält. Das Problem ist, dass es keinen dist-Ordner und keine popper.min.js-Datei gibt.
Bootstrap 4-Leitfaden enthält Links zu CDN: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
Wie importiere ich popper.js ohne CDN? Wo finde ich popper.min.js-Datei?
BEARBEITEN: Auch wenn ich Zip von der popper.js-Website herunterlade, enthält es genau die gleichen Dateien wie von bower.
Ich bin auf das gleiche Problem gestoßen.
Ich habe die Datei 'popper.min.js' vom CDN auf der Bootstrap-Website heruntergeladen.
Siehe hier: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
Einfacher als das Projekt zu kompilieren.
Die offizielle Installation von Popper.js erfolgt über npm, Yarn oder NuGet.
Verwenden Sie einen der folgenden Befehle:
npm i popper.js
yarn add popper.js
PM> Install-Package popper.js
Alles ist in der Readme-Datei der Bibliothek beschrieben.
Bezüglich der "Downloads der Zip" gibt die Zip eindeutig an, dass sie den Quellcode der Bibliothek enthält.
Bearbeiten :
Ab Version 1.12.0 ist Popper.js als Bower-Abhängigkeit verfügbar.
Diese Installationsmethode wird nur für die 1.x-Version von Popper.js unterstützt und in 2.x entfernt.
Sie sollten Ihr Abhängigkeiten-Management auf ein modernes System wie npm oder Yarn migrieren, wie Bower ebenfalls empfiehlt.
Ich verstehe wirklich nicht, warum die Javascript-Welt versucht, etwas komplizierter zu machen. Warum nicht einfach herunterladen und in HTML einfügen? Versuchen, etwas wie Maven in Java zu haben? Aber wir müssen es trotzdem manuell in HTML einbinden? Also, was ist der Punkt? Vielleicht werde ich eines Tages aber jetzt nicht verstehen.
So kann ich es bekommen
- nodeJs herunterladen und installieren
- starte "npm install popper.js --save"
dann bekomme ich diese nachricht
[email protected] 1 Paket in 1.215s
wo ist dann "add package"? sehr informativ, richtig? Ich habe es in meinem C:\Users\surasin\node_modules\popper.js\dist gefunden
Ich hoffe das hilft
So erhalten Sie popper.js: Paket, CDN und lokale Datei
Der beste Weg hängt davon ab, ob Sie ein Projekt mit einem Paketmanager wie npm haben.
Paket-Manager
Wenn Sie einen Paketmanager verwenden, verwenden Sie ihn, um popper.js wie folgt zu erhalten:
npm install popper.js --save
CDN
Für eine Prototyp- oder Spielplatzumgebung (wie http://codepen.io ) oder möchten Sie einfach eine URL zu einer CDN-Datei:
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.jshttps://cdnjs.cloudflare.com/ajax) /libs/popper.js/1.12.5/umd/popper.min.js
Hinweis: Bootstrap 4 benötigt die Versionen unter dem umd -Pfad (weitere Informationen zu Popper/bs4) .
Lokale Datei
Speichern Sie einfach eine der CDN-Dateien, um sie lokal zu verwenden. Fügen Sie beispielsweise eine dieser URLs in einen Browser ein, und klicken Sie auf Speichern unter, um eine lokale Kopie zu erhalten.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.jshttps://cdnjs.cloudflare.com/ajax) /libs/popper.js/1.12.5/umd/popper.min.js
Ich hatte das gleiche Problem. Ich habe verschiedene Ansätze ausprobiert, aber diese hat für mich funktioniert. Lesen Sie die Anleitung von http://getbootstrap.com/ .
Kopieren Sie die CDN-Pfade von Javascripts (Popper, jQuery und Bootstrap) auf dieselbe Weise (es ist wichtig) wie angegeben.
<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>IN bootstrap 4 du musst popper js für tooltip hinzufügen, ich verstehe auch nicht warum bootstrap 4 enthält externe popper.js, das heißt bootstrap macht das Upgrade auf die neuesten Versionen komplizierter anstatt einfacher.
Sie können popper js importieren, bevor bootstrap on angular oder ein einfacher html, Angular import so wäre
npm install popper.js --save
dann gehe zu .angular-cli.json und ändere die Reihenfolge wie unten.
"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"
],
sie können in jedem Projekt auch CDN-Direktaufruf-Popper-Js verwenden.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.jshttps://cdnjs.cloudflare.com/ajax/ libs/popper.js/1.12.5/umd/popper.min.js
Ich habe alle vorhandenen Popper-Verzeichnisse gelöscht und bin dann gelaufen
npm install --save popper.js angular-popper
addiere popper **. js ** als Abhängigkeit anstelle von nur popper: siehe den Unterschied in Fettdruck.
gar nicht mehr mit .__, sondern mit popper.js. Garn hinzufügen Popper
es macht den Unterschied.
und fügen Sie das Skript nach Ihren Bedürfnissen hinzu:
B. als HTML oder den Bibliothekszugriff als Abhängigkeit in SPA-Anwendungen wie React oder Winkel
Sie können Bootstrap und Popper mit einem einzigen Befehl mit Fetch Injection herunterladen und importieren.
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'
]));
Fügen Sie CSS-Dateien hinzu, wenn Sie auch diese benötigen. Passen Sie Versionen und externe Quellen an Ihre Anforderungen an und prüfen Sie, ob Sie die Subressourcen-Integritätsprüfung in Betracht ziehen, wenn Sie die Dateien nicht in Ihrer eigenen Domäne hosten oder der Quelle nicht vertrauen.