Quiero servir un archivo html estático con elementos definidos en un archivo javascript usando importaciones de submódulos. ¿Cómo es esto posible con vainilla JS? ¿O necesito algunas herramientas de agrupación y/u otros marcos? Ejemplo de estructura de código para ilustrar mi intención:
índice.html
<html> <div id="screen"> <div id="grid"></div> </div> <h1>Example</h1> <body> <script type="module" src="index.js"></script> </body> </html>índice.js
import { buildGrid } from "./buildGrid.js" var http = require("http"); http .createServer(function (req, res) { fs.readFile(__dirname + req.url, function (err, data) { if (err) { res.writeHead(404); res.end(JSON.stringify(err)); return; } res.writeHead(200); res.header("Content-Type", "application/javascript"); res.end(data); }); }) .listen(8080); 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); }estilo.css
body, html { background: #111; color: white; } #screen { display: flex; flex-direction: column; } .cell { width: 30px; height: 30px; background: #2d2f34; }Dividir el código en una parte del servidor y una parte del cliente resolvió mis problemas, como se señaló correctamente en los comentarios.
Entonces, todo el manejo del servidor se colocó en un archivo server.js , mientras que el contenido específico del cliente (que se inyectará en el archivo index.html ) se colocó en el archivo index.js .
Además, también utilicé submódulos para separar diferentes partes del archivo index.js . Por lo tanto, era necesario especificar <script type="module" src="./index.js"></script> en la importación en el archivo index.html . Y en el archivo server.js , los diferentes tipos de archivos se manejaron configurando el encabezado según el tipo de archivo en la solicitud. Espero que lo siguiente sea de ayuda para otros que sirvan HTML con módulos JS usando nodejs.
Así que la estructura del archivo final era así
server.jsindex.jsbuildGrid.mjsstyle.cssindex.htmlservidor.js
"use strict"; var http = require("http"); var fs = require("fs"); function readFile(req, res) { var filePath = __dirname + req.url; fs.readFile(filePath, (error, data) => { if (error) { res.setHeader("Content-Type", "text/html"); res.writeHead(404); res.write("Not found error 404"); res.end(); } else { const url = req.url === "/" ? "/index.html" : req.url; if (req.url.includes("js")) res.setHeader("Content-Type", "application/javascript"); if (req.url.includes("css")) res.setHeader("Content-Type", "text/css"); if (req.url.includes("html")) res.setHeader("Content-Type", "text/html"); res.writeHead(200); res.write(data); res.end(); } }); } http .createServer(function (req, res) { readFile(req, res); }) .listen(8080);índice.html
<html> <h1>Example</h1> <div id="screen"> <div id="grid"></div> </div> <head> <link rel="stylesheet" href="./style.css" /> </head> <body> <script type="module" src="./index.js"></script> </body> </html>índice.js
import { buildGrid } from "./buildGrid.mjs" export function main { buildGrid() }buildGrid.mjs
export function buildGrid() { let grid = document.getElementById("grid"); let cell = document.createElement("div"); cell.className = "cell"; cell.textContent = "test; grid.appendChild(cell); }estilo.css
body, html { background: #111; color: white; font-family: sans-serif; } #screen { display: flex; flex-direction: column; } .cell { width: 30px; height: 30px; }