it-swarm.com.de

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.

19
Qrzysio

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.

12
Zerus

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.

10
Fez Vrasta

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

5

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

3
whitneyland

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.

 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

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

0
Ajit Kumar

Ich habe alle vorhandenen Popper-Verzeichnisse gelöscht und bin dann gelaufen

npm install --save popper.js angular-popper
0
rpd

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

0
andhdo

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.

0
Josh Habdas