Hay algo que no entiendo de esto. Estoy tratando de aprender Typescript y obtuve este código repetitivo usando Snowpack y contiene un archivo index.html que se refiere a "dist/index.js" como su secuencia de comandos, mire a continuación:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Web site created using create-snowpack-app" /> <link rel="stylesheet" type="text/css" href="/index.css" /> <title>Snowpack App</title> </head> <body> <img id="img" src="/logo.svg" /> <canvas id="canvas"></canvas> <noscript>You need to enable JavaScript to run this app.</noscript> <script type="module" src="/dist/index.js"></script> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> </html>Esta cosa index.html está en la carpeta "pública". También tengo el archivo "index.ts" en la carpeta "src", que solo hace un archivo console.log ("hola, es este mecanografiado o javascript idk") . Me da este registro de la consola, por lo que parece estar funcionando.
Lo que no entiendo es cómo index.html intenta buscar una carpeta "dist" que contenga un archivo "index.js" mientras que no existen ni la carpeta "dist" ni el archivo "index.js". También tengo una carpeta node_modules pero tampoco existe allí.
¿Como funciona esto? ¿Se simula la carpeta "dist" o algo así, mientras contiene un archivo index.js inexistente cuando todo esto se está ejecutando?
Typescript en sí mismo no lo sabe, excepto que cuando compila todos sus otros archivos js, el compilador (babel/webpack, etc.) generará un archivo dist/index.js .
Básicamente es como compilar su archivo C++ para construir Google Chrome. C++ no sabe dónde o qué es el archivo chrome.exe , excepto que el script/comando de compilación le indica que genere chrome.exe a partir del código fuente.
Nota: Dependiendo de su proceso de compilación, el directorio puede llamarse dist o build o target o mootdrafters_website, etc. El script react-create-app, por ejemplo, no nombra su carpeta de salida dist sino que genera build/index.js en su lugar.
¿Cómo ejecutó su código repetitivo usando cmd 'snowpack dev'?
Si es así, snowpack proporciona un servidor web que se ejecuta en el proceso nodejs, y el 'src/index.ts' se transpiló a 'dist/index.js' (en la memoria). Cuando su navegador solicita 'dist/index.js', el servidor snowpack responde al contenido del archivo en la memoria. Es por eso que no existe tal carpeta 'dist'.
Más adelante, si prueba cmd 'snowpack build', verá la carpeta 'dist'.
'snowpack dev' para desarrollo, usando un servidor web localmente
'construcción de paquete de nieve' para producción, puede implementar la carpeta 'dist' en cualquier otro servidor web