Nodejs + Rickshaw：src= 参考不起作用答案

【问题标题】：Nodejs + Rickshaw: src= reference not workingNodejs + Rickshaw：src= 参考不起作用
【发布时间】：2023-04-05 20:30:01
【问题描述】：

我正在尝试制作一个应用程序来生成 Twitter 字数统计的“实时”图表，基本上是尝试在 24 小时内扩展和练习 NodeJS 的第 14 章。我决定使用“人力车”，我想我会从简单的例子开始。但是，虽然我可以加载一个简单的 html 页面，但我无法显示图表。 Firefox 调试指示：“ReferenceError: Rickshaw is not defined [Break On This Error] graph = new Rickshaw.Graph( { " 。这意味着存在引用错误，但经过几个小时的谷歌搜索和阅读，我没有看到了。目录结构是正确的；npm 正确安装了所有模块，没有错误。任何人都可以看到我缺少什么吗？

注意：我是 JS/Node 的新手，虽然这本书是在 Express 2.x 中工作的，但我一直在 Express 3.x 中工作，所以不确定我是否在所有情况下都得到了正确的翻译。代码如下：

package.json

    {
    "name":"socket.io-twitter-example",
    "version": "0.0.1",
    "private": "true",
    "dependencies": {
        "express": ">=2.5.4",
        "rickshaw": ">=1.1.0"
        }
    }

app.js

    var express = require('express'),
        rickshaw = require('rickshaw'),
        app = express(),
        http = require('http'),
        server = http.createServer(app)

    server.listen(3000);
    app.get('/', function (req,res) {
        res.sendfile(__dirname + '/index.html');
    });

index.html

    <!DOCTYPE html>
    <html lang="eng">
        <head>
            <meta charset="UTF-8" />
            <title>Socket.IO Twitter Example</title>
        </head>
        <body>
            <h1>Rickshaw Example</h1>


            <div id="chart"></div>
            <ul class="tweets"></ul>

            <script type="text/javascript" src="node_modules/rickshaw/vendor/d3.v2.js"></script> //don't think "node_modules/" is required, but doesn't work without either
            <script type="text/javascript" src="node_modules/rickshaw/rickshaw.min.js"></script>

            <script>
                graph = new Rickshaw.Graph( {
                    element: document.querySelector("#chart"), 
                    width: 285, 
                    height: 180, 
                    series: [{
                        color: 'steelblue',
                        data: [ 
                            { x: 0, y: 40 }, 
                            { x: 1, y: 49 }, 
                            { x: 2, y: 38 }, 
                            { x: 3, y: 30 }, 
                            { x: 4, y: 32 } ]
                    }]
                });
                graph.render();
            </script> 


        </body>
    </html>

【问题讨论】：

标签： html node.js express d3.js rickshaw

【解决方案1】：

您需要配置express.static 中间件，以便express 知道在哪里寻找静态资源，如js 和css 文件：

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

通常将此类资源放入public 文件夹（如上例所示）或static 文件夹中。

如果你创建一个public 文件夹并像这样组织它

app.js
public
  rickshaw
    vendor
      d3.v2.js
    rickshaw.min.js

那么您就可以使用

将文件正确加载到您的 html 中了

<script type="text/javascript" src="/rickshaw/vendor/d3.v2.js"></script>
<script type="text/javascript" src="/rickshaw/rickshaw.min.js"></script>

有关中间件的更多信息和示例，请参阅 express 文档中的 this section。

【讨论】：