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

Question

我只想测试我的 webcomponets，我得到了

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 而不会出现上述错误？

server.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（一个非常简单的 vanilla webcomponet）

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

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 的文件，它就可以工作，否则它会显示一个错误页面。

我没有对此进行测试，但我的想法是 re-read 每次请求 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 的文件夹，并将您的文件和 sub-folders 放在那里。

进一步更新：

这里有一个稍微好点的没有express的服务器

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

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

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

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

how to provide a very basic node server to serve a webcomponent for local tests?

web-component

node.js