node.js - 如何提供一个非常基本的节点服务器来为本地测试提供 web 组件？

Question

我只想测试我的网络组件，我得到了

simple-call.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

环顾四周，我找到了几个启动节点的答案，但这正是我正在做的。在我的情况下有一个显着的区别：index.html 导入一个 Web 组件，这可能会增加我还没有找到的额外要求。

所以我的直截了当的问题是，我怎样才能启动一个非常简单的 Web 服务器来提供下面的 index.html 而不会出现上述错误？

服务器.js

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

const PORT=8082; 

fs.readFile('./index.html', function (err, html) {

    if (err) throw err;    

    http.createServer(function(request, response) {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(PORT);
});

index.html（现在只有两行）

<script type="module" src="./simple-call.js"></script>

<simple-call></simple-call>

simple-call.js（一个非常简单的香草网络组件）

const template = document.createElement('template');
template.innerHTML = `<input id="inputSimpleRequest"/>`;

class SimpleCall extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {

    this.attachShadow({mode: 'open'})
    this.shadowRoot.appendChild(template.content.cloneNode(true))

    const inputSimpleRequest = this.shadowRoot.getElementById('inputSimpleRequest');
    const url = 'http://localhost:8081/';

    fetch(url)
    .then(response => response.json())
    .then(data => {
      inputSimpleRequest.value = data.somephrase; 
    })
    .catch(error => console.error(error));

  }
}

window.customElements.define("simple-call", SimpleCall);

标签： node.jsweb-component

Answer 1

稍微翻转一下：

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

const PORT=8888;

http.createServer((request, response) => {
  fs.readFile('./index.html', (err, html) => {
    if (err) {
      response.writeHeader(500, {"Content-Type": "text/html"});
      response.write(JSON.stringify(err, 0, 2));
    }
    else {
      response.writeHeader(200, {"Content-Type": "text/html"});
      response.write(html);
    }

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

更新：我更改并测试了上面的代码。只要有一个名为的文件，它就可以工作，index.html否则它会显示错误页面。

我没有对此进行测试，但想法是每次请求时都重新读取 HTML 文件，而不仅仅是一次。

或者您可以使用express并使其根据 URL 提供真实文件：

const express = require('express');

const app = express();
const PORT = process.env.PORT = 4000;

// The magic happens here
app.use(express.static('public'));

app.listen(PORT, () => {
  console.log('Server is running at:',PORT);
});

然后你创建一个名为的文件夹public并将你的文件和子文件夹放在那里。

进一步更新：

这是没有快递的稍微好一点的服务器。

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

const PORT=8888;

http.createServer((request, response) => {
  let url = '.'+request.url;
  if (url === './') {
    url += 'index.html';
  }
  console.log(url);
  fs.readFile(url, (err, html) => {
    if (err) {
      response.writeHeader(404, {"Content-Type": "text/html"});
      response.write(JSON.stringify(err, 0, 2));
    }
    else {
      response.writeHeader(200, {"Content-Type": "text/html"});
      response.write(html);
    }

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

这允许您访问现有文件夹结构中的任何文件。

不过要小心。没有保护，有人可能会尝试在当前路径以下的路径中加载文件。不要在生产中使用