javascript - 如何在本地 Node.js 服务器 html 页面上包含多个库

Question

所以我有一个 html 页面，上面有一些面部识别库，它工作正常。但是当我将 html 页面放在 node.js 本地服务器上时，所有图片和 javascript 库都不再包含在内。对于每个包含的库，我都会收到一个:“Uncaught SyntaxError: Unexpected token <”错误，位于 html 页面的第一行。

我尝试将它们包含在 node.js 文件中，如下所示:

var app = require('http').createServer(handler)
  , io = require('socket.io').listen(app)
  , fs = require('fs') 
  , five = require("johnny-five"),
  led;


//iets met poort 80
app.listen(80);

// webserver handler 
function handler (req, res) {

  fs.readFile(__dirname + '/emotie.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

function handler (req, res) {

  fs.readFile(__dirname + '/js/emotionmodel.js',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading emotionmodel.js');
    }

    res.writeHead(200);
    res.end(data);
  });
}

function handler (req, res) {

  fs.readFile(__dirname + '/js/emotion_classifier.js',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading emotionClassifier.js');
    }

    res.writeHead(200);
    res.end(data);
  });
} 

但它仍然不起作用，并且文件路径肯定是正确的。

Answer 1

当您的浏览器需要客户端 JavaScript 并获取 HTML 时，您会收到错误消息。

首先，您有两个名为 handler 的函数，但实际上只使用了其中一个。您应该考虑使用 linter 来帮助您检测此类问题。

此外，您正在尝试编写单独的处理程序来分别为所有单独的文件提供服务 - 您应该做的是将所有静态内容(HTML、JS 和您想要提供的其他所有内容)放入一个目录中并提供其中的所有文件。

如果您将所有内容放在名为 public 的目录中，那么您可以使用 Express 使用类似的内容:

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

var dir = path.join(__dirname, 'public');

app.use(express.static(dir));

app.listen(3000, function () {
  console.log('Listening on http://localhost:3000/');
});

如果您不想使用 Express，请参阅此答案以获取更多文件服务选项:

• How to serve an image using nodejs

我还注意到，您直接监听端口 80，这通常意味着您以 root 身份运行 Node 应用程序。考虑以非特权用户身份运行它，并使用反向代理来监听端口 80，并将流量传递到监听其他端口的应用程序。