使用Node.js，Socket.IO和Express提供静态javascript文件 [英] Serving static javascript files with Node.js, Socket.IO and Express

问题描述

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

I have a simple node.js application which uses socket.io and express. At the moment all of the javascript is in the HTML file but I would like to try and separate it out into a .js file.

在我的主节点应用程序中，我有这个：

In my main node application I have this:

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文件：

This works fine until I move my javascript from index.html to a .js file then try to reference it from my HTML file like this:

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

我认为快递不提供静态文件所以我试过这个：

I think that express is not serving the static file so I have tried this:

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

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

Can anyone tell me what I am doing wrong?

推荐答案

nodejs和express默认情况下不提供任何文件。所以，当你创建第一条路线时：

nodejs and express do not serve ANY files by default. So, when you created your first route:

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

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

That successfully allowed a browser request for / to see your index.html file. The browser will then receive that HTML file and parse it. If it finds <script> tags inside that file, it will then make a new web request to your server. So, if that file has this in it:

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

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

The browser, will then ask your server for /functions.js. Since you had no route for that request, your server will return a 404 error and the browser will not get your script file.

因此，您必须制定一条路线当浏览器要求时，它将正确地提供 /functions.js ，同时仍保留为index.html文件提供服务的现有路由。

So, you have to make a route that will properly serve /functions.js when the browser asked for it, while still keeping your existing route that serves the index.html file.

您可以为 /functions.js 制定特定路线，就像您为 / 所做的那样。或者，对于静态文件，您可以使用 express.static（）来创建可以提供许多静态文件的智能路由。

You can either make a specific route for /functions.js just like you did for /. Or, for static files, you can use express.static() to create a smart route that can serve many static files.

要使用 express.static（），您可以在服务器上创建一个目录（它可以在任何地方），但是人们常常把它放在服务器文件所在的目录下面是。我通常选择将其命名为 public ，因此每个人都明白这些文件是公开可用的。然后，您可以使用express.static创建一个智能路线，如下所示：

To use express.static() you create a directory on your server (it can be anywhere), but folks often put it below the directory where your server files are. I generally choose to name it public so it's obvious to everyone that these files are publicly available. Then, you can create a smart route using express.static like this:

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

这行中间件告诉快递，如果有任何请求以开头/ js ，然后在 __ dirname +/ public目录中查找匹配的文件。因此，如果请求进入 /js/functions.js ，则查找名为 __ dirname +/public/functions.js的文件。如果找到该文件，则自动提供。要在index.html文件中正常运行，您可以将< script> 标记设为：

This line of middleware tells express that if any requests come in that start with /js, then look for a matching file in the __dirname + "/public" directory. So, if a request comes in for /js/functions.js, then look for a file named __dirname + "/public/functions.js". If that file is found, then serve it automatically. To make this work properly in your index.html file, you would make the <script> tag be this:

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

/ js / 前缀我是这里使用的纯粹取决于你。您甚至不必使用前缀，它可以命名为您想要的任何名称。您只需确保在< script> 标记中使用的前缀与您在传递给 express的第一个参数中使用的前缀相匹配。静态（）。我喜欢为我的静态JS和CSS文件使用前缀，因此它们存储并在与我的核心HTML文件不同的位置查找（这只是我的个人偏好，但在路上它也可能使缓存更简单）或使用像NGINX这样的东西也可以更简单地提高性能。）

The /js/ prefix I've used here is purely up to you. You don't even have to use a prefix and it can be named anything you want. You just have to make sure that the prefix you use in the <script> tag matches the prefix you use in the first argument passed to express.static(). I like to use a prefix for my static JS and CSS files so they are stored and looked for in a location that is different than my core HTML files (that's just a personal preference of mine, but down the road it might also make caching simpler or make using something like NGINX to improve performance simpler too).

使用 express.static （）你必须通过改变这个来保存对 express 模块的引用：

To use express.static() you have to save a reference to the express module by changing this:

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

到此：

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

或者，在任何最新版本的nodejs中，我更喜欢使用 const 表示不应重新分配的变量：

Or, in any recent version of nodejs, I prefer to use const for variables that should not be reassigned:

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

这篇关于使用Node.js，Socket.IO和Express提供静态javascript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！