Question

我正在使用node（没有express）配置一个非常基本的服务器。我有一个html文件，该文件具有指向javascript文件的链接。现在，我只能加载html文件，而不能加载js资源。如何加载js文件？

server.js

var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');

var scriptFile = path.join(__dirname), '/script.js')

http.createServer(function(req, res) {
 if (req.url === '/') {
   fs.readFile('./index.html', function(err, data) {
     if (err){
      throw err;
     }
     res.writeHead(200, {"Content-Type": 'text/html'});
     res.write(data); 
     fs.readFileSync(path.normalize(scriptFile)) //throws error here. script file when html page is loaded. 
//i'm trying to load the script.js when html file is loaded
     res.end();
     return;
   });
  }
}).listen(3000);

html：

<body>
 <h1> Hi </h1>
 <script src="script.js">
</body>

Answer 1

@David指出，对路由/script的响应应该以不同的方式处理，此外，请考虑利用Node.js stream s的健壮性

const fs = require('fs');
const http = require('http');

http.createServer(function (req, res) {

  if (req.url === '/') {
    fs.createReadStream('index.html').pipe(res);
    return;
  }

  if (req.url === '/script.js') {
    fs.createReadStream('script.js').pipe(res);
    return;
  }

}).listen(3000);

此外，它还整理了源代码！

Answer 2

当您的浏览器请求index.html时，它将读取HTML并发现它在<script>标记中引用了您的脚本文件。当浏览器看到这些内容时，它将向服务器发出附加请求。因此，要提供其他文件，您只需处理这些路由的请求。我修改了您的示例以证明这一点：

server.js

var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');

http.createServer(function(req, res) {
    if (req.url === '/') {
        fs.readFile('./index.html', function(err, data) {
            if (err){
                throw err;
            }
            res.writeHead(200, { 'Content-Type': 'text/html' });
            res.write(data); 
            res.end();
            return;
        });
    } else if (req.url === '/script.js') {
        fs.readFile('./script.js', function (err, data) {
            if (err) { throw err; }
            res.writeHead(200, { 'Content-Type': 'text/javascript' });
            res.write(data);
            res.end();
            return;
        });
    }
}).listen(3000);

index.html

<html>
    <head>
        <title></title>
    </head>
    <body>
        <h1> Hi </h1>
        <!-- Your browser will see this and then make an additional HTTP GET request for /script.js -->
        <script src="script.js"></script>
    </body>
</html>

您可以使用Chrome开发者工具验证此行为。

打开开发者工具，方法是选择右上角的三点菜单，然后选择“更多工具->开发者工具”。
转到“网络”标签。
导航到localhost：3000（或仅刷新页面）。

您将看到发出了两个请求。第一个用于index.html，然后第二个用于script标记中引用的脚本。

在节点中加载JavaScript文件？

2 个答案: