Javascript 配置node express以提供静态bower_组件？

我有一个目录结构

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

我想启动我的应用程序并为node提供

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);
});

<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

的底部，我有：

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);
});

<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>

---

如何提供来自bower_components的文件？

将目录结构更改为：

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>

在本例中，目录结构保持不变。希望这有帮助。
快乐编码…）

我使用此设置：

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

因此，任何Bower组件都是从HTML加载的，如下所示：

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

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

你应该使用

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

注意（path.join）的用法，它不同于@robertklepanswer

根据我的说法，这是一个很好的说明

join将处理不必要的分隔符，如果 给定路径来自未知来源（例如用户输入、第三方 API等）

所以path.join（'a/'，'b'）path.join（'a/'，'b'）、path.join（'a'，'b'）和 join（'a'，'/b'）都将给出a/b

如果不使用它，你通常会对开始有所期待 路的尽头汇合在一起，知道他们只有一条或几条斜线

我正在使用：

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

我的

app.js

将

bower\u组件定义为静态路径：

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

我正在运行Windows7（x64）

希望这对其他人有所帮助。
在将bower_组件移动到另一个文件夹后也遇到同样的问题。
这有助于我理解发生了什么。
这些文件很有用：

及
我将此代码放入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>

在我的例子中，这是一个正确的路径。
可以在
.bowerrc
文件中使用JSON配置Bower。
在包含以下内容的项目根目录下添加一个
.bowerrc
文件

{
  "directory": "public/bower_components"
}

这将把您引用的bower组件放入正确的库中，您不需要express中的extract static目录。
这也适用于我：

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

确保已重置本地服务器，或确保正在运行nodemon以查看更改
另请参见我的类似问题（已回答），也许这会有所帮助：我有一个问题。
package.json
和
bower.json
是否相互冲突？对于名称、版本等字段，甚至可能是具有不同版本的相同包的依赖项。您在package.json中放了什么，在bower.json中放了什么？
package.json
用于npm依赖项（很多时候是服务器端或构建系统需求），而
bower.json
仅用于客户端依赖项，如bootstrap、angular或jquery。它们彼此不冲突我发现了为什么它不起作用答案现在应该使用path.join（uu dirname，/bower_components'）我使用Yeoman生成引导和express。我不得不添加
app.use（'/bower_components'，express.static（config.root+'/bower_components'）
到/config/express.js文件。注意config.root而不是_dirname，我有一个问题。上面的项目包含
package.json
和
bower.json
。这些是否相互冲突？对于名称、版本等字段，甚至可能是具有不同版本的相同包的依赖项。package.json中应该包含什么，bower.json中应该包含什么？@NickyThai一般来说，
bower.json
用于客户端依赖项，
package.json
用于服务器端依赖项。我的直觉告诉我这被否决了，因为如果你手动将bower_components目录移动到另一个目录下，您将失去软件包管理器的某些功能。您可以使用
.bowerrc
文件将bower配置为将其
bower\u组件
文件夹放置在
公用
文件夹中，如中所示。如果我正在使用Grunt，我想在Gruntfile中配置服务器的静态文件目录，但我不知道如何使用
Grunt express
，这正是我正在使用的。所以我的解决办法就是移动文件夹。我几乎下意识地否决了你的答案。我认为移动
bower\u components
文件夹是一种反模式。但是我想不出任何反对它的理由，而且它看起来是一个简单的解决方案。
path.join
不应该包含带有
+
运算符的连接，它应该是逗号
，
instead我已经尝试了+和，但不能在windows系统上工作。但我可以使用其他文件夹中的资产文件，只使用相同的过程，而不使用“bower_components”文件夹。请帮助我修复它。@robertklep为什么我们需要对bower_组件执行此操作，而不需要对其他目录（如css js img）执行此操作？我找不到任何文件
app.use('/bower_components',  express.static(__dirname + '/bower_components'));