配置node express来提供静态bower_components？

Question

我有一个目录结构

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提供文件？

Answer 1

我用这个设置:

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

所以任何Bower组件都是从HTML加载的,如下所示:

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

并且任何其他客户端JS/CSS(in public/)都像这样加载:

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

Answer 2

你应该用

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

注意(path.join)的用法与@robertklep答案不同

以下是来自另一个SO问题的说明,根据我的说法非常好

path.join将处理不必要的分隔符,如果给定的路径来自未知来源(例如,用户输入,第三方API等),则可能会出现这种情况.

所以path.join('a /','b')path.join('a /','/ b'),path.join('a','b')和path.join('a', '/ b')都会给a/b.

如果不使用它,你通常会对加入的pathes的开始和结束做出预期,知道它们只有没有或有一个斜线.

Answer 3

可以在.bowerrc文件中使用JSON配置Bower .

.bowerrc使用内容在项目的根目录中添加包含以下内容的文件.

{
  "directory": "public/bower_components"
}

这将把您正在引用的bower组件放在正确的库中,并且您不需要在express中提取静态目录.