如何在 node.js 的客户端包含 javascript？

Question

我是 node.js 和 javascript 的初学者。

我想在 html 代码中包含外部 javascript 文件。这是html代码，“index.html”：

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

还有，这里是 javascript 代码，“simple.js”：

document.write('Hello');

当我直接在网络浏览器（例如 Google Chrome）上打开“index.html”时，它可以工作。 （屏幕上应该会显示“Hello”消息。）

但是，当我尝试通过 node.js http 服务器打开“index.html”时，它不起作用。 这是 node.js 文件，“app.js”：

var app = require('http').createServer(handler)
  , fs = require('fs')

app.listen(8000);

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

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

(“index.html”、“simple.js”和“app.js”在同一个目录下。) 我启动了http服务器。 （通过“bash$node app.js”） 之后，我尝试连接“localhost:8000”。 但是，“你好”消息没有出现。

我认为“index.html”未能在 http 服务器上包含“simple.js”。

我该怎么办？

Answer 1

亚历山大是对的。我会尽量澄清他的回答。

碰巧您必须为您的请求编写一个“路由器”。下面是一个让它工作的简单方法。如果你期待www.nodebeginner.org，你会找到一种构建合适路由器的方法。

var fs = require("fs");
var http = require("http");
var url = require("url");

http.createServer(function (request, response) {

    var pathname = url.parse(request.url).pathname;
    console.log("Request for " + pathname + " received.");

    response.writeHead(200);

    if(pathname == "/") {
        html = fs.readFileSync("index.html", "utf8");
        response.write(html);
    } else if (pathname == "/script.js") {
        script = fs.readFileSync("script.js", "utf8");
        response.write(script);
    }


    response.end();
}).listen(8888);

console.log("Listening to server on 8888...");

Answer 2

问题是，无论您的浏览器请求什么，您都会返回“index.html”。因此浏览器会加载您的页面并获取 html。该 html 包含您的脚本标记，并且浏览器会向节点询问脚本文件。但是，您的处理程序设置为忽略请求的目的，因此它只是再次返回 html。

Answer 3

这是一个工作代码。 应该有更简洁更简洁的代码，但这已经非常接近最小化了。

此代码假设您的 index.html 和其他文件位于 /client 目录下。

祝你好运。

var fs = require('fs');
var url = require("url");
var path = require('path');
var mime = require('mime');

var log = console.log; 

var handler = function (req, res)
{
    var dir = "/client";
    var uri = url.parse(req.url).pathname;
    if (uri == "/")
    {
        uri = "index.html";
    }
    var filename = path.join(dir, uri);
    log(filename);
    log(mime.lookup(filename));
    fs.readFile(__dirname + filename,
        function (err, data)
        {
            if (err)
            {
                res.writeHead(500);
                return res.end('Error loading index.html');
            }
            log(data);
            log(filename + " has read");
            res.setHeader('content-type', mime.lookup(filename));
            res.writeHead(200);
            res.end(data);
        });
}

Answer 4

您的处理程序被硬编码为始终返回/index.html 的内容。您需要注意正在请求的资源并返回正确的资源。 （即如果浏览器请求simple.js，那么您需要提供simple.js 而不是index.html）。

Answer 5

function contentType(ext) {
    var ct;

    switch (ext) {
    case '.html':
        ct = 'text/html';
        break;
    case '.css':
        ct = 'text/css';
        break;
    case '.js':
        ct = 'text/javascript';
        break;
    default:
        ct = 'text/plain';
        break;
    }

    return {'Content-Type': ct};
}

var PATH = 'C:/Users/DELL P26E/node_modules'
var http = require("http");
var fs = require('fs');
var url = require("url");
var path = require("path")
var fileName = "D:/index.html";
    
var server = http.createServer (function (request, response) {

var dir = "D:/";
var uri = url.parse(request.url).pathname;

if (uri == "/") {
    uri = "index.html";
}

var filename = path.join(dir, uri);

fs.readFile(filename,
    function (err, data) {
        if (err) {
            response.writeHead(500);
            return response.end('Error loading index.html');
        }
                
        var ext = path.extname(filename)
        response.setHeader('content-type',contentType(ext));
        response.writeHead(200);
        response.end(data);
    });
}).listen(3000);
    
console.log('Server running on 8124') ;