web-dev-qa-db-ja.com

npmを通してTwitter Bootstrapをインストールする目的は？

質問1：

Npmを介してTwitter Bootstrapをインストールする目的は、正確には何ですか？私はnpmがサーバーサイドモジュールのためのものであると思いました。 CDNを使用するよりも自分でブートストラップファイルを提供する方が速いですか？

質問2：

Bootstrapをnpmインストールする場合、bootstrap.jsファイルとbootstrap.cssファイルをどのように指定すればよいでしょうか。

node.jstwitter-bootstrapexpressnpmcdn
216
James Fazio

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

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

    ブートストラップのjavascriptファイルをモジュールとして提供するということです。上で述べたように、これは browserify を使ってそれをrequireすることを可能にします、そしてそれは私が理解するように、ブートストラップがnpmで公開される主な理由です。

  2. どうやって使うのですか

    次のプロジェクト構造を想像してみてください。

     project 
 |  -  node_modules 
 |  -  public 
 | |  -  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');

そしてこのコードは、実際にbootstrap.jsが必要なjavascriptファイルにのみ含めます。 Browserify はこのファイルをあなたに代わって含めます。

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

アップデート2017年3月

私がこの答えを書いてから2年近くが経ちました、そして更新は整っています。

現在一般的に受け入れられている方法は、ビルドステップですべてのアセットをバンドルするために webpack （または他の最適なバンドル）のようなバンドルを使用することです。

まず、browserifyと同じようにcommonjs構文を使うことができるので、あなたのプロジェクトにブートストラップのjsコードを含めるためにも同じことをします。

const bootstrap = require('bootstrap');

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

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

そしてcssファイルはあなたのビルドに "魔法のように"含まれます。これらはアプリケーションの実行時に<style />タグとして動的に追加されますが、それらを個別のcssファイルとしてエクスポートするようにwebpackを設定することができます。それについてはwebpackのドキュメントでもっと読むことができます。

結論として。

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

それらのモジュールを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と同じです）から直接ページを提供することはしないでしょう。ファイル。

もちろん、あなたは単にあなたのフォルダに単にダウンロードしてコピー＆ペーストすることができますが、NPMを使えばあなたは必要なときに単に更新することができます...もっと簡単に、私は思います。

179
Augusto Goncalves

答え1：

  • ブートストラップをnpm（またはbower）でダウンロードすると、待ち時間を増やすことができます。リモートのリソースを取得する代わりに、ローカルのリソースを取得します。cdnを使用している場合を除き、処理は速くなります（回答の下をチェックしてください）。

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

答え2：

もしあなたがブートストラップをnpmインストールするなら（もしあなたがdistフォルダに移動するために特定のgruntやgulpファイルを使わないなら）、あなたのブートストラップは間違っていなければ "./node_modules/bootstrap/bootstrap.min.css"にあります。

72
mfrachet

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

  2. いいえ、あなたはこれを自分でやらなければなりません。例えば ​​'grunt-contrib-concat' Grunt.js（0.3.x）を使って複数のCSSとJavaScriptファイルを連結して縮小する方法

3
7affer