如何使用 express 和 nodeJS 将 javascript 文件链接到 html 页面答案

【问题标题】：How to link a javascript file to an html page using express and nodeJS如何使用 express 和 nodeJS 将 javascript 文件链接到 html 页面
【发布时间】：2014-11-24 08:39:45
【问题描述】：

我的 nodeJS 应用程序非常简单，但我很难将我的 javascript 文件链接到它。通常，您只需将脚本放在标题中。显然，这不适用于 Node，因此尝试通过 sendFile 和其他一些方法将其链接起来，但都没有奏效。

我的 Javascript 很简单：

var express = require('express');
var app = express();


app.get('/',function(req, res) {
    res.sendFile(__dirname + '/index.html');
    res.send()
});
app.listen(8888)

我的 HTML 也很简单：

<html>
<head>
    <title>Charter</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
    <div id="container" style="width:100%; height:400px;"></div>
    <button id="button" class="autocompare" onclick="plotNewChart()">Add series</button>
    <script type="text/javascript">
         $(function () { $('#container').highcharts({ chart: { events: { addSeries: function () { var label = this.renderer.label('A series was added, about to redraw chart', 100, 120).attr({ fill: Highcharts.getOptions().colors[0], padding: 10, r: 5, zIndex: 8 }) .css({ color: '#FFFFFF' }) .add(); setTimeout(function () { label.fadeOut(); }, 1000); } } }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); });
    </script>
</body>
</html>

我想做的是链接另一个文件myJS.js。如果没有典型的`

，我不知道该怎么做

【问题讨论】：

您链接的 javascript 是服务器端的。将其放入项目根目录中的 .js 文件中，并以 node filename.js 开头
有没有办法制作javascript客户端？
我不确定 express 是否有能力甚至有可能运行客户端。但这是我自己的经验。

标签： javascript html node.js

【解决方案1】：

您需要设置 Express 服务器以提供静态文件。目前，它似乎只服务于 '/' 路线。

就在您设置路由之前，添加以下行。然后，您可以从相对于脚本所在位置的“公共”文件夹中提供静态资产。

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

因此，如果您将 myJS.js 放入 public/js/myJS.js 中，则可以像这样引用它

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

文档中的更多信息：http://expressjs.com/api.html#express.static

【讨论】：

我链接创建了一个新的快递应用程序，按照我在下面的链接中阅读的内容和您的说明进行操作。但是，我认为我必须使用app.engine('html', require('ejs').renderFile);，以免必须在“jade”中编写 html。此外，由于某种原因，即使在我创建开箱即用的 express 应用程序时 css 工作（没有添加我的静态 html），javascript 也不会链接。你知道为什么吗？ stackoverflow.com/questions/11710995/…
哦，我明白了——layout.jade 页面已经自动链接了 css，所以我可以通过那里链接我的 js。但是仍然无法通过静态获得它：|
需要加上：var path = require('path');否则代码会报错。
ReferenceError: 路径未定义
如果我们只想静态公开一个这样的文件怎么办？