配置节点快递服务静态 bower_components？答案

【问题标题】：configure node express to serve static bower_components?配置节点快递服务静态 bower_components？
【发布时间】：2014-03-16 07:37:30
【问题描述】：

我有一个目录结构

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

【问题讨论】：

另请参阅我的类似问题（已回答），也许它可能会有所帮助：stackoverflow.com/questions/23933621/…
我有一个问题。 package.json 和 bower.json 是否相互冲突？对于名称，版本等字段，甚至可能具有不同版本的相同包的依赖项。你在 package.json 中放了什么，在 bower.json 中放了什么？
package.json 用于 npm 依赖项（很多时候是服务器端或构建系统要求），其中 bower.json 仅用于客户端依赖项，如引导、角度或 jquery。它们不会相互冲突

标签： javascript node.js express bower

【解决方案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>

【讨论】：

我找到了为什么它不起作用stackoverflow.com/questions/23933621/…
答案现在应该使用 path.join(__dirname, '/bower_components')
我使用 Yeoman 生成 bootstrap 和 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 用于服务器端依赖。

【解决方案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 将处理不必要的分隔符，如果给定的路径来自未知来源（例如，用户输入、第 3 方 API 等）。

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

如果不使用它，您通常会对开始产生期望和路径的尽头加入，知道他们只有一个或一个斜线。

【讨论】：

path.join 不应包含与 + 运算符的连接，而应为逗号 ,
我用 + 和都试过了，但在 windows 系统上不行。但是我可以使用其他文件夹中的资产文件使用相同的过程，但不能使用“bower_components”文件夹。帮我解决它。
@robertklep 为什么我们需要为 bower_components 执行此操作，而不为 css js img 等其他目录执行此操作？我找不到任何文档

【解决方案3】：

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

在项目的根目录下添加一个.bowerrc 文件，内容如下。

{
  "directory": "public/bower_components"
}

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

【讨论】：

【解决方案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 config 中添加以下内容来表达。然后您的配置代码如下所示：

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

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

【讨论】：

我的直觉告诉我这是被否决的，因为如果您手动将 bower_components 目录移动到另一个目录下，您将失去一些包管理器的功能。
您可以配置 bower 以使用 .bowerrc 文件将其 bower_components 文件夹放在 public 文件夹中，如 this example with express and grunt。如果我使用 Grunt，我想在我的 Gruntfile 中配置我的服务器的静态文件目录，但我不知道如何使用我正在使用的 grunt-express 来完成它。所以我的解决方案是移动文件夹。
我几乎不赞成你的回答，因为这是一种下意识的反应。我在想移动 bower_components 文件夹是一种反模式。但我想不出有什么好的理由反对它，而且它看起来是一个简单的解决方案。

【解决方案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)。

希望这对某人有所帮助。

【讨论】：

【解决方案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')))

在我的情况下这是一条正确的路径。

【讨论】：

【解决方案7】：

这也适用于我：

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

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

【讨论】：

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

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