web-dev-qa-db-ja.com

popper.jsをインポートするには？

それは不完全な質問のようですが、私はそれを理解することはできません。 Bootstrap 4ベータ版に付属するpopper.jsをインポートする方法は？

Bowerを使用し、Bootstrap 4 betaをインストールしました。 bower_componentsフォルダーにはpopper.jsディレクトリーがあり、いくつかのサブフォルダーが含まれています。問題は、distフォルダーとpopper.min.jsファイルがないことです。

CDNへのブートストラップ4ガイドのリンク： https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

しかし、CDNなしでpopper.jsをインポートする方法は？ popper.min.jsファイルはどこにありますか？

編集：popper.js WebサイトからZipをダウンロードしても、bowerと同じファイルが含まれています。

javascriptbootstrap-4popper.js
29
Qrzysio

私は同じ問題に遭遇しました。

bootstrap WebサイトのCDNから「popper.min.js」ファイルをダウンロードしました。

こちらをご覧ください： https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js

プロジェクトをコンパイルするよりも簡単です。

17
Zerus

Popper.jsをインストールする公式の方法は、npm、Yarn、またはNuGetを使用することです。

次のコマンドのいずれかを使用します。

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

すべてがライブラリのreadmeに記載されています。

「Zipのダウンロード」に関して、Zipには、ライブラリのソースコードが含まれていることが明記されています。

編集：

バージョン1.12.0から、Poper.jsはBower依存関係として利用可能になりました。

このインストール方法は、1.xバージョンのPopper.jsでのみサポートされ、2.xで削除されます。

Bowerが提案しているように、依存関係管理をnpmやYarnなどの最新のシステムに移行する必要があります。

11
Fez Vrasta

Popper.jsを取得する方法：パッケージ、CDN、およびローカルファイル

最適な方法は、npmなどのパッケージマネージャーを使用したプロジェクトがあるかどうかによって異なります。

パッケージマネージャー
パッケージマネージャーを使用している場合は、それを使用して次のようにpopper.jsを取得します。

npm install popper.js --save

CDN
プロトタイプ環境または遊び場環境（ http://codepen.io など）の場合、またはCDNファイルへのURLが必要な場合：

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

注：Bootstrap 4には、umdパスの下のバージョンが必要です （詳細popper/bs4） 。

ローカルファイル

ローカルで使用するCDNファイルの1つを保存するだけです。たとえば、これらのURLの1つをブラウザーに貼り付け、[名前を付けて保存...]を選択してローカルコピーを取得します。

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

7
whitneyland

Javascriptの世界がもっと複​​雑なことをしようとしている理由が本当にわかりません。なぜダウンロードしてhtmlに含めないのですか？ JavaでMavenのようなものを使用しようとしていますか？しかし、とにかく手動でHTMLに含める必要がありますか？それで、ポイントは何ですか？たぶんいつかは理解できますが、今は理解できません。

これは私がそれを得る方法です

  • nodeJのダウンロードとインストール
  • 「npm install popper.js --save」を実行します

  • その後、私はこのメッセージを受け取ります

    [email protected]は1.215秒で1パッケージを追加しました

  • 次に、「パッケージの追加」はどこにありますか？非常に有益ですよね？私はC：\ Users\surasin\node_modules\popper.js\distでそれを見つけました

この助けを願っています

6
Surasin Tancharoen

同じ問題がありました。さまざまなアプローチを試してみましたが、これは私のために働きました。 http://getbootstrap.com/ から指示を読んでください。

Javascript（Popper、jQuery、およびBootstrap）のCDNパスを同じ方法（重要）でコピーします

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

既存のポッパーディレクトリを削除してから実行しました

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

popperの代わりにpopper **。js **を依存関係として追加（のみ）：太字の違いを参照してください。

yarn add popper.js、yarn add popperの代わりに

それが違いを生みます。

必要に応じてスクリプトを含めます。

反応または角度のようなSPAアプリケーションの依存関係としてのHTMLまたはライブラリアクセスとして

0
andhdo

Fetch Injection を使用して、1つのコマンドですべてのBootstrapとPopperをダウンロードしてインポートできます。

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ファイルを追加します。ニーズに合わせてバージョンと外部ソースを調整し、独自のドメインでファイルをホストしていない場合やソースを信頼していない場合は、サブリソースの整合性チェックの使用を検討してください。

0
Josh Habdas