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

Question

我有一个使用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');
});

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

Answer 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();