在节点中加载javascript文件？答案

【问题标题】：Loading javascript file in node?在节点中加载javascript文件？
【发布时间】：2019-05-24 03:54:41
【问题描述】：

我正在用节点配置一个非常基本的服务器（没有快递）。我有一个 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>

【问题讨论】：

标签： node.js

【解决方案1】：

当您的浏览器请求 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 标签中引用的脚本。

【讨论】：

我刚开始使用 Node，这是迄今为止我找到的最直接的解决方案感谢分享！

【解决方案2】：

@David 指出，路由 /script 的响应应该以不同的方式处理，此外考虑使用 Node.js streams 以实现稳健性

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);

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

【讨论】：

两个答案都有帮助。