Esta es la contestación más correcta que te podemos dar, pero primero mírala detenidamente y analiza si se puede adaptar a tu trabajo.
Solución:
Esencialmente, tiene un servidor que para cualquier solicitud dada, sirve el contenido de su index.html
archivo, independientemente de cómo se vea esa solicitud. Por lo tanto, un navegador recibe el HTML y comienza a interpretarlo haciendo otra solicitud para el src
de tu script
etiqueta y dado que el servidor solo sirve su index.html
archivo, el navegador recibe su archivo HTML por segunda vez cuando esperaba javascript.
Por lo general, primero crearía un servidor y luego construiría respuestas basadas en la solicitud como entrada. Un ejemplo primitivo de servir a su static los archivos de la forma que pretendía podrían parecerse a los siguientes:
const http = require('http')
const fs = require('fs')
const PORT = 8080
http
.createServer((request, response) =>
fs.readFile(`.$request.url`, (err, data) =>
if (err)
response.writeHeader(404,
'Content-Type': 'text/plain'
)
response.write('404 Not Found')
response.end()
return
if (request.url.endsWith('.html'))
response.writeHeader(200,
'Content-Type': 'text/html'
)
if (request.url.endsWith('.js'))
response.writeHeader(200,
'Content-Type': 'application/javascript'
)
response.write(data)
response.end()
)
)
.listen(PORT)
Tenga en cuenta que este ejemplo es demasiado confiado para el cliente y normalmente querrá desinfectar la solicitud de alguna manera. Me quedé con el javascript de vainilla, pero una vez que te sientas cómodo con su funcionamiento, vale la pena echarle un vistazo a Express, ya que simplificará el enrutamiento/repetición de tipo mimo, etc.
Más adelante puedes encontrar las crónicas de otros usuarios, tú aún tienes la habilidad insertar el tuyo si te apetece.