如何使用Express和NodeJS将JavaScript文件链接到HTML页面

8

我的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启动它。 - Christopher Marshall
有没有办法将JavaScript变成客户端的? - maudulus
我不确定Express是否有能力或潜力在客户端运行。但这是我的个人经验。 - Christopher Marshall
1个回答

21

你需要设置Express服务器以服务于静态文件。目前,看起来它只服务于'/'路径。

在设置路由之前,添加以下代码行。然后,你可以从与脚本相关的'public'文件夹提供静态资源。

你需要设置Express服务器以服务于静态文件。目前,看起来它只服务于'/'路径。

在设置路由之前,添加以下代码行。然后,你可以从与脚本相关的'public'文件夹提供静态资源。

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


我创建了一个新的express应用程序,遵循下面链接中的内容和您的指示。但是,我认为我必须使用app.engine('html', require('ejs').renderFile);,这样就不必在“jade”中编写html。此外,由于某种原因,即使在创建了express应用程序后(没有添加我的静态html),css也可以工作,但javascript无法链接。你知道为什么吗?https://dev59.com/Y2bWa4cB1Zd3GeqPZKs9 - maudulus
哦,我明白了——layout.jade页面已经自动链接了CSS,因此我可以通过它来链接我的JS。但是我仍然无法使用静态文件 :| - maudulus
你需要添加:var path = require('path'); 否则代码会导致错误。 - 7stud
ReferenceError: path未定义。 - Saravanan Nandhan
如果我们只想静态地公开一个单独的文件,该怎么办? - information_interchange
啊,我们可以像平常一样使用 res.sendFileapp.get('/js/app.js',function(req,res){ res.sendFile(path.join(__dirname + '/js/app.js')); }); - information_interchange

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接