web-dev-qa-db-ja.com

静的なbower_componentsを提供するようにNode Expressを構成しますか？

ディレクトリ構造を持っています

projectName
    | - bower_components/
    | - public/
        | - css
        | - js
        | - index.html
    | - Gruntfile.js
    | - package.json
    | - bower.json
    | - app.js

アプリを起動して、index.htmlをノードで提供したいと思います。 app.jsには以下があります：

var express = require('express');
var port = process.env.PORT || 3000;
var app = express();

app.configure(function(){
    // Serve up content from public directory
    app.use(express.static(__dirname + '/public'));
    app.use(app.router);
    app.use(express.logger()); 
});

app.listen(port, function(){
    console.log('Express server listening on port ' + port);
});

index.htmlの一番下には：

<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/d3/d3.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/spin.js/spin.js"></script>
<script src="bower_components/mustache/mustache.js"></script>

サーバーを起動すると、index.htmlが表示されますが、上記のライブラリはロードされません。エラー（404）が表示されます。

GET http://localhost:3000/bower_components/jquery/jquery.js 404 (Not Found) localhost/:32
GET http://localhost:3000/bower_components/d3/d3.js 404 (Not Found) localhost/:33
GET http://localhost:3000/bower_components/bootstrap/dist/js/bootstrap.js 404 (Not Found) localhost/:34
GET http://localhost:3000/bower_components/spin.js/spin.js 404 (Not Found) localhost/:35
GET http://localhost:3000/bower_components/mustache/mustache.js 404 (Not Found)

Bower_componentsからファイルを提供するにはどうすればよいですか？

javascriptnode.jsexpressbower
71
Connor Leech

私はこのセットアップを使用します：

app.use(express.static(__dirname + '/public'));
app.use('/bower_components',  express.static(__dirname + '/bower_components'));

したがって、すべてのBowerコンポーネントは次のようにHTMLからロードされます。

<script src="/bower_components/..."></script>

その他のクライアント側JS/CSS（public/）このようにロードされます：

<script src="/js/..."></script>
195
robertklep

あなたが使用する必要があります

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

@ path.joinとは異なる（path.join）の使用に注意してください

別のSO質問 からのメモです。

path.joinは不必要な区切り文字を処理します。これは、指定されたパスが未知のソース（ユーザー入力、サードパーティAPIなど）からのものである場合に発生する可能性があります。

したがって、path.join（ 'a /'、 'b'）path.join（ 'a /'、 '/ b'）、path.join（ 'a'、 'b'）およびpath.join（ 'a'、 '/ b'）はすべてa/bを返します。

使用しない場合、通常、パスがスラッシュを1つも持たないか、1つしか持たないことを知って、結合されたパスの開始と終了について期待します。

8
Abhijit Mazumder

Bowerは、.bowerrcファイルでJSONを使用して設定できます。

コンテンツのあるプロジェクトのルートに、次のコンテンツを持つ.bowerrcファイルを追加します。

{
  "directory": "public/bower_components"
}

これにより、参照しているBowerコンポーネントが正しいライブラリに配置され、Expressで静的ディレクトリを抽出する必要がなくなります。

5
Arthur Anderson

私は使用しています：

$ npm -version && node -v
2.11.3
v0.12.7

と私 app.jsにはこの定義がありますbower_components静的パスとして：

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

私のJadeテンプレートでは、jqueryとbootstrapを次のように参照します。

doctype html
html
    head
        title= title
        link(href='bootstrap/dist/css/bootstrap.min.css', rel='stylesheet')
        link(href='bootstrap/dist/css/bootstrap-theme.min.css', rel='stylesheet')
    body
        block content

    script(type='text/javascript', src='jquery/dist/jquery.js')
    script(type='text/javascript', src='bootstrap/dist/js/bootstrap.js')

Windows 7（x64）を実行しています。

これが誰かを助けることを願っています。

0
FilmiHero

Bower_componentsを別のフォルダーに移動した後、同じ問題が発生しました。これは、何が起こっているのかを理解するのに役立ちました。ドキュメントは役に立ちました： https://github.com/expressjs/serve-static

そして、このコードをnode/express app.jsファイルに入れました：

console.log('DIRNAME:', __dirname, 'JOINED:', path.join(__dirname, '../../bower_components'));

これはindex.htmlからです

<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>

そしてapp.jsで

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

私の場合、これは正しいパスです。

0
ICospac

これは私にも役立ちます：

app.use('/bower_components',  express.static(__dirname + '/bower_components'));

ローカルサーバーをリセットしたことを確認するか、変更を確認するためにnodemonを実行していることを確認してください！

0
Javier Armero Ciudad