質問

質問1:

Twitter Bootstrapをnpmでインストールする目的は一体何でしょうか？npmはサーバーサイドモジュールのためのものだと思っていました。CDNを使うより、自分でブートストラップファイルを提供する方が速いのですか？

質問2:

Bootstrapをnpmでインストールする場合、bootstrap.jsとbootstrap.cssのファイルはどのように指定するのですか？

どのように解決するのですか？

1. CDNを利用するポイントとしては より速く であるため、まず第一に 分散型 ネットワークに接続されていること、そして第二に、静的ファイルはブラウザによってキャッシュされているため、例えばCDN の jquery のライブラリは、ユーザーのブラウザによってすでにダウンロードされていたため、ファイルはキャッシュされており、不必要なダウンロードは行われていません。とはいえ、やはり フォールバックを提供するために .

   さて、bootstrapのnpmパッケージのポイントである

   は、ブートストラップの ジャバスクリプト ファイルを モジュール . 上述したように、これによって require を使用しています。 ブラウザ化 これは最も可能性の高いユースケースであり、私の理解では、ブートストラップがnpmで公開されている主な理由です。

2. 使用方法

   次のようなプロジェクト構成を想像してください。

   プロジェクト
   |-- node_modules
   |-- パブリック
   |-- css
   |-- img
   |-- js
   |-- index.html
   |-- package.json
   
   
   

あなたの index.html の両方を参照することができます。 css と js ファイルはこのようになります。

<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

どちらが一番シンプルな方法で、正しいのは .css ファイルを作成します。しかし bootstrap.js ファイル内のどこかにこのような public/js/*.js ファイルを作成します。

var bootstrap = require('bootstrap');

そして、このコードをこれらの javascript ファイル内で実際に必要な bootstrap.js . ブラウザ化 は、このファイルを含めることを代行します。

さて、欠点は、フロントエンドのファイルを node_modules という依存関係があり node_modules フォルダは、通常、チェックインしていない git . ここが一番議論のあるところだと思います、たくさんの 意見 と ソリューション .

UPDATE 2017年3月

この回答を書いてから約2年が経過し、アップデートが実施されました。

現在、一般的に受け入れられている方法は バンドル のように ウェブパック (または他の任意のバンドル)を使用して、ビルドステップですべてのアセットをバンドルします。

まず、browserifyと同じようにcommonjsの構文が使えるので、プロジェクトにbootstrap jsのコードを含めるには、同じようにします。

const bootstrap = require('bootstrap');

については css ファイルは、webpack には " と呼ばれるものがあります。 ローダー となります。これをjsのコードに書くことができるようになります。

require('bootstrap/dist/css/bootstrap.css');

を指定すると、css ファイルはビルドに魔法のように含まれます。 として動的に追加されます。 <style /> タグとしてエクスポートするように設定することができます。 css ファイルを作成します。詳細は webpack のドキュメントを参照してください。

結論から言うと

1. アプリのコードはbundlerでバンドルする必要があります。
2. どちらもコミットしてはいけません node_modules と動的にビルドされたファイルをgitに保存します。この場合 build スクリプトをnpmに追加し、それを使ってサーバーにファイルをデプロイします。いずれにせよ、これは好みのビルドプロセスに応じて、さまざまな方法で行うことができます。