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

IT技术 javascript node.js express bower
2021-02-21 13:31:22

我有一个目录结构

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

我想启动我的应用程序并使用 node.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 提供文件？

6个回答

我使用这个设置：

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>
@NickyThai 一般而言，bower.json用于客户端依赖项，package.json用于服务器端依赖项。
2021-04-27 13:31:22
答案现在应该使用 path.join(__dirname, '/bower_components')
2021-04-28 13:31:22
我使用 Yeoman 生成 bootstrap 和 express。我不得不添加app.use('/bower_components', express.static(config.root + '/bower_components'));到 /config/express.js 文件中。注意config.root而不是 __dirname
2021-05-04 13:31:22
我有个问题。上述项目同时具有package.json和bower.json。这些是否相互冲突？对于名称，版本等字段，甚至可能具有不同版本的相同包的依赖项。什么应该在 package.json 中，什么应该在 bower.json 中？
2021-05-04 13:31:22
我找到了为什么它不起作用stackoverflow.com/questions/23933621/...
2021-05-08 13:31:22

你应该使用 

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 将处理不必要的分隔符，如果给定的路径来自未知来源（例如用户输入、第 3 方 API 等），则可能会发生这种情况。

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

如果不使用它，您通常会对加入的路径的开始和结束做出预期，因为知道它们只有一个斜线或没有斜线。

我已经尝试过 + 和 ，但在 Windows 系统上不起作用。但是我能够使用来自其他文件夹的资产文件使用相同的过程，但不能使用“bower_components”文件夹。帮我修一下。
2021-04-27 13:31:22
path.join不应该包含与串联+操作，它应该是逗号,，而不是
2021-05-11 13:31:22
@robertklep 为什么我们需要为 bower_components 执行此操作，而不需要为其他目录（例如 css js img）执行此操作？我找不到任何文档
2021-05-17 13:31:22

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

.bowerrc在项目的根目录添加一个包含以下内容的文件。

{
  "directory": "public/bower_components"
}

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

将您的目录结构更改为：

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多次注入express）
在app config 中添加如下内容进行express。然后你的配置代码看起来像：

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文件夹是一种反模式。但我想不出任何反对它的好理由，这看起来是一个简单的解决方案。
2021-05-01 13:31:22
我的直觉告诉我这被否决了，因为如果您手动将 bower_components 目录移动到另一个目录下，您将失去一些包管理器的功能。
2021-05-08 13:31:22
您可以将 bower 配置为使用文件将其bower_components文件夹放在public文件夹中.bowerrc，如本例中使用 express 和 grunt。如果我使用 Grunt，我想在 Gruntfile 中配置服务器的静态文件目录，但我不知道如何grunt-express使用 . 所以我的解决方案是移动文件夹。
2021-05-14 13:31:22

我正在使用：

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

希望这可以帮助某人。

其它你可能感兴趣的问题
上一篇超级骨干 下一篇JavaScript 中的“闭包”究竟指的是什么？