web-dev-qa-db-ja.com

Bootstrap in Node Project

基本的なnpmコマンドを使用して足場を組んだMEANスタックプロジェクトがあります。現時点では、BootstrapはCDNを使用して含まれています。

link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css')

私の質問は、npmを使用してbootstrapを追加して、プロジェクトがCDNインクルージョンと同じように機能するようにする方法です。特に、

npm install bootstrap

boostrapディレクトリがnode_modules内に作成されます。ただし、そのディレクトリからbootstrap.cssを含めようとすると、グリフィコンフォントが壊れます。誰かがそれを行う方法についてアドバイスできますか？

追伸AngularJS自体についても同じ質問をします。

javascriptnode.jstwitter-bootstrapnpmnpm-install
14
MadPhysicist

ブラウザパッケージマネージャーを使用できますbower

Bowerは、フロントエンドのパッケージ管理の問題に対する一般的で根拠のないソリューションを提供する一方で、より適切なビルドスタックで利用できるAPIを介してパッケージ依存モデルを公開します。システム全体の依存関係はなく、依存関係は異なるアプリ間で共有されておらず、依存関係ツリーはフラットです。

どちらがより良く、信頼できるかについてもっと知識が欲しいなら、これも読んでください link も。

npmでない理由

NpmとBowerの主な違いは、パッケージの依存関係をインストールする方法です。 npmは各パッケージの依存関係を個別にインストールし、その結果、大きなパッケージ依存関係ツリー(node_modules/grunt/node_modules/glob/node_modules/...)、同じパッケージの複数のバージョンが存在する可能性がある場合。クライアントサイドJavaScriptの場合、これは受け入れられません。jQueryまたは他のライブラリの2つの異なるバージョンをページに追加することはできません。 Bowerを使用すると、各パッケージが一度インストールされます（jQueryは常にbower_components/jqueryフォルダー、依存するパッケージの数に関係なく）、依存関係が競合する場合、Bowerは既にインストールされているパッケージと互換性のないパッケージをインストールしません。

Bowerのインストール

パッケージをインストールするだけです

構文

npm install -g bower

詳細については、Docを参照してください。

例：

ディレクトリ構造

project Folder
  + bower_components
     + bootstrap
       + dist
         + css
           + bootstrap.css
     + jquery
       + jquery.js
  + public
    + index.html
  + app.js

これで、app.jsに静的パスを設定できます

app.use(express.static(path.join(__dirname, 'bower_components')));

これで、index.htmlファイルで簡単に使用できます

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
    <link rel='stylesheet' href='/bootstrap/dist/css/bootstrap.css' />
</head>
<body>
{{{ yield }}}
</body>
<script src="/bootstrap/dist/jquery/jquery.js"></script>
</html>

スクリーンショット

app.jsファイルのディレクトリ構造enter image description here

通常のHTMLファイルenter image description here

17
Akhilesh Singh