一尘不染

使用Node.js,Socket.IO和Express服务静态javascript文件

node.js

我有一个使用socket.io和express的简单node.js应用程序。目前所有的javascript都在HTML文件中,但我想尝试将其分离为.js文件。

在我的主节点应用程序中,我有以下内容:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

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

直到我将javascript从index.html移到.js文件,然后尝试从我的HTML文件中引用它,如下所示:

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

我认为express无法提供静态文件,因此我尝试了以下方法:

app.get('/', function (req, res) {
    res.sendFile(__dirname + '/functions.js');
});

谁能告诉我我在做什么错?


阅读 199

收藏
2020-07-07

共1个答案

一尘不染

默认情况下,nodejs和express不提供任何文件。因此,当您创建第一个路线时:

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

这成功地允许浏览器请求/查看您的index.html文件。然后,浏览器将接收该HTML文件并进行解析。如果<script>在该文件中找到标签,它将向您的服务器发出新的Web请求。因此,如果该文件包含以下内容:

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

然后,浏览器将询问您的服务器/functions.js。由于您没有该请求的路由,因此服务器将返回404错误,并且浏览器将无法获取脚本文件。

因此,您必须制作一条能够/functions.js在浏览器要求时正确使用的路由,同时仍然保留用于index.html文件的现有路由。

您可以/functions.js像为一样为自己建立一条特定的路线/。或者,对于静态文件,您可以express.static()用来创建可以服务许多静态文件的智能路由。

要使用express.static()您在服务器上创建目录(可以在任何地方),但是人们经常将其放在服务器文件所在的目录下。我通常选择命名,public因此对所有人来说这些文件都是公开可用的。然后,您可以使用express.static创建智能路由,如下所示:

app.use(express.static("/js", path.join(__dirname, "public")));

这行中间件告诉我们,如果有任何以开头的请求/js,请在__dirname + "/public"目录中查找匹配的文件。因此,如果有请求/js/functions.js,则寻找名为的文件__dirname + "/public/functions.js"。如果找到该文件,则将其自动提供。为了使它在index.html文件中正常工作,您可以将<script>标签设为:

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

/js/我在这里使用的前缀完全由您决定。您甚至不必使用前缀,并且可以将其命名为所需的任何名称。您只需要确保<script>标记中使用的前缀与传递给的第一个参数中使用的前缀匹配即可express.static()。我喜欢为我的静态JS和CSS文件使用前缀,以便在与我的核心HTML文件不同的位置存储和查找它们(这只是我的个人喜好,但在将来,它也可能使缓存变得更简单或使用类似NGINX的方法来简化性能)。


要使用它,express.static()您必须express通过更改以下内容来保存对模块的引用:

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

对此:

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

或者,在任何最新版本的nodejs中,我更喜欢将其const用于不应重新分配的变量:

const express = require('express');
const app = express();
2020-07-07