質問1：

npmを介してTwitter Bootstrapをインストールする目的は何ですか？私はnpmがサーバー側のモジュールのためのものであることを考えました。ブートストラップファイルを提供する方が、CDNを使用するよりも高速ですか？

質問2：

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

1. CDNを使用することのポイントは、最初に分散ネットワークであるため高速であるということですが、次に、静的ファイルがブラウザーによってキャッシュされており、たとえばサイトのCDNのライブラリである可能性が高いためです。使用はユーザーのブラウザによってすでにダウンロードされていたため、ファイルはキャッシュされていたため、不要なダウンロードは行われていませんでした。そうは言っても、フォールバックを提供することは依然として良い考えです。jquery

   さて、ブートストラップのnpmパッケージのポイント

   ブートストラップのjavascriptファイルをモジュールとして提供することです。上で述べたように、これはbrowserifyrequireを使用してそれを可能にします。これは最も可能性の高いユースケースであり、私が理解しているように、ブートストラップが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。Browserifyがこのファイルをインクルードします。

ここでの欠点は、フロントエンドファイルがnode_modules依存関係として存在し、node_modules通常はでフォルダがチェックインされないことgitです。これは、多くの意見や解決策があり、最も物議を醸している部分だと思います。

2017年3月更新

この回答を書いてから約2年が経過し、更新が行われました。

今一般的に受け入れられている方法が使用することですバンドラのようWebPACKのビルドステップですべてのあなたの資産をバンドルする（または選択した別のバンドラ）。

1つ目は、browserifyと同じようにcommonjs構文を使用できるため、プロジェクトにブートストラップjsコードを含める場合も同じです。

const bootstrap = require('bootstrap');

cssファイルに関しては、webpackはいわゆる「ローダー」を持っています。彼らはこれをあなたのjsコードで書くことを可能にします：

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

そして、CSSファイルはビルドに「魔法のように」含まれます。これらは<style />アプリの実行時に動的にタグとして追加されますが、個別のcssファイルとしてエクスポートするようにwebpackを構成できます。詳細については、webpackのドキュメントをご覧ください。

結論として。

1. バンドラーを使用してアプリコードを「バンドル」する必要があります
2. node_modules動的にビルドされたファイルもgitにもコミットしないでください。buildサーバーにファイルをデプロイするために使用するスクリプトをnpmに追加できます。とにかく、これは、好みのビルドプロセスに応じて、さまざまな方法で実行できます。

これらのモジュールをNPMする場合は、静的リダイレクトを使用してモジュールを提供できます。

最初にパッケージをインストールします。

npm install jquery
npm install bootstrap

次にserver.jsで：

var express = require('express');
var app = express();

// prepare server
app.use('/api', api); // redirect API calls
app.use('/', express.static(__dirname + '/www')); // redirect root
app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // redirect bootstrap JS
app.use('/js', express.static(__dirname + '/node_modules/jquery/dist')); // redirect JS jQuery
app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // redirect CSS bootstrap

次に、最後に.htmlで：

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

私はtimetowonder によって提案されているように、server.jsファイルがあるフォルダー（通常はnode_modulesと同じです）から直接ページを提供しません。これにより、人々はserver.jsファイルにアクセスできます。

もちろん、ダウンロードしてフォルダにコピーして貼り付けることもできますが、NPMを使用すると、必要なときに簡単に更新できます。

回答1：

• npm（またはbower）を介してブートストラップをダウンロードすると、ある程度の待ち時間が得られます。リモートリソースを取得する代わりに、ローカルリソースを取得します。cdnを使用する場合を除いて、より高速です（以下の回答を確認してください）

• 「npm」はもともとNode Moduleを取得するためのものでしたが、Javascript言語の一種（およびbrowserifyの登場）により、少し成長しました。実際、npmにAngularJSをダウンロードすることもできます。これはサーバー側フレームワークではありません。Browserifyでは、クライアント側でAMD / RequireJS / CommonJSを使用できるため、クライアント側でノードモジュールを使用できます。

回答2：

npmがブートストラップをインストールする場合（特定のgruntまたはgulpファイルを使用してdistフォルダーに移動しない場合）、間違っていない場合、ブートストラップは「./node_modules/bootstrap/bootstrap.min.css」に配置されます。

1. npm / bowerを使用して、ブートストラップを再コンパイルしたり、変更するファイルを少なくしたり、テストしたりする場合に使用します。gruntを使用すると、http://getbootstrap.com/getting-started/#gruntに示すように、これを行うのが簡単になります。プリコンパイルされたライブラリのみを追加したい場合は、プロジェクトに手動でファイルを含めてください。

2. いいえ、あなたは自分でこれを行うか、別のうなり声ツールを使用する必要があります。例： 'grunt-contrib-concat' Grunt.js（0.3.x）で複数のCSSおよびJavaScriptファイルを連結および縮小する方法