如何用原生JavaScript（含子模块）托管静态HTML文件？

你的需求完全可以靠原生JavaScript达成，现代浏览器原生支持ES模块（就是你用的type="module"），直接就能导入子模块。不过你的代码里有几个明显错误，得修正之后才能正常运行：

问题点修正说明 #

• HTML结构错误：页面内容（#screen、<h1>）必须放在<body>标签内部，你现在把它们放在了<html>下、<body>外，不符合HTML规范。
• 混入Node.js代码：index.js里的http.createServer是Node.js服务端代码，浏览器环境根本不认识这段，完全没必要写——静态页面要么用简单的工具起个静态服务（比如Python的python -m http.server、Node.js的npx serve），要么部分浏览器允许直接双击index.html打开（注意可能有本地跨域限制）。
• 字符串语法错误：buildGrid.js里cell.textContent = "test;少了闭合双引号，会导致JS报错。
• 未引入样式文件：style.css没在HTML里引入，样式不会生效。

修正后的完整代码 #

index.html #

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div id="screen">
      <div id="grid"></div>
    </div>
    <h1>Example</h1>
    <script type="module" src="./index.js"></script>
  </body>
</html>

index.js #

import { buildGrid } from "./buildGrid.js";

// 删掉Node.js的服务器代码，只保留页面逻辑
buildGrid();

buildGrid.js #

export function buildGrid() {
    let grid = document.getElementById("grid");
    let cell = document.createElement("div");
    cell.className = "cell";
    cell.textContent = "test"; // 补全闭合双引号
    grid.appendChild(cell);
}

style.css #

body,
html {
  background: #111;
  color: white;
  margin: 0;
  padding: 10px;
}
#screen {
  display: flex;
  flex-direction: column;
}
.cell {
  width: 30px;
  height: 30px;
  background: #2d2f34;
}

运行方式 #

1. 把所有文件放在同一个文件夹里
2. 用静态文件服务器托管这个文件夹（比如执行python -m http.server 8080，然后访问http://localhost:8080）
3. 部分浏览器允许直接双击index.html打开（若遇到跨域报错，优先用静态服务器方案）

内容的提问来源于stack exchange，提问作者CaminoDS