配置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（在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回答不同

以下是来自Another SO questions的说明，根据我的说法非常清楚

  

path.join将处理不必要的分隔符，如果可能会发生   给定的路径来自未知来源（例如，用户输入，第三方   API等。）。

     

所以path.join（＆＃39; a /＆＃39;，＆＃39; b＆＃39;）path.join（＆＃39; a /＆＃39;，＆＃39; / b＆＃ 39;），path.join（＆＃39; a＆＃39;，＆＃39; b＆＃39;）和   path.join（＆＃39; a＆＃39;，＆＃39; / b＆＃39;）都会给a / b。

     

不使用它，你通常会对开始有所期待   知道他们只有没有或有一个斜线。

Answer 3

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

在项目的根目录中添加包含以下内容的.bowerrc文件及其内容。

{
  "directory": "public/bower_components"
}

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

Answer 4

将目录结构更改为：

projectName

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

在index.html进行以下更改：

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

<小时/> 或者另一种方法是将您的bower_components文件夹切换为静态内容。 （您可以多次注入static middleware表示） 在app congfig中添加以下内容以表达。然后你的配置代码如下：

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(express.static(__dirname + '/bower_components'));
    app.use(app.router);
    app.use(express.logger()); 
});

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

在这种情况下，您的目录结构保持不变。希望这有帮助。
快乐的编码.. :)

Answer 5

我正在使用：

$ 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）。

希望这有助于某人。

Answer 6

将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')))

这是我的正确道路。

Answer 7

这对我也有用：

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

确保您已重置本地服务器或确保运行nodemon以查看更改！