Question

我有一个简单的node.js应用程序，它使用socket.io和express。目前所有的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();

Answer 2

解决方案非常简单：在express中使用express.static内置中间件功能。

例如，您可以将其添加到主节点应用程序中：

app.use("/js", static(__dirname + '/js'));

有关详情，请参阅：https://expressjs.com/en/starter/static-files.html

使用Node.js，Socket.IO和Express提供静态javascript文件

2 个答案: