'How does Typescript know where dist/index.js is, if it doesn't exist?

There is something I don't understand about this. I am trying to learn Typescript and I got me this boilerplate code using Snowpack and it contains an index.html file which refers to "dist/index.js" as its script, look below:

<!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>

This index.html thing is in the "public" folder. I also have "index.ts" file in the "src" folder, which only does a console.log("hello is this typescript or javascript idk"). It does give me this console log so it seems to be working.

What I don't understand is how the index.html tries to look for a folder "dist" containing a "index.js" file while neither the "dist" folder nor the "index.js" file exist. I also have a node_modules folder but it doesn't exist there either.

How does this work? Is the "dist" folder simulated or something, while containing a non-existing index.js file when this whole thing is running?

javascripthtmltypescript


Solution 1:[1]

Typescript itself doesn't know except that when you compile all your other js files the compiler (babel/webpack etc.) will generate a dist/index.js file.

Basically it's like compiling your C++ file to build Google Chrome. C++ does not know where or what the chrome.exe file is except that the build script/command tells it to generate chrome.exe from source code.

Note: Depending on your build process the directory can be named dist or build or target or mootdrafters_website etc. The react-create-app script for example does not name it's output folder dist but generates build/index.js instead.

Solution 2:[2]

How did you run your boilerplate code, by using cmd 'snowpack dev'?

If so, snowpack provides a web server running in nodejs process, and the 'src/index.ts' has been transpiled to 'dist/index.js' (in memory).When your browser requests 'dist/index.js' , the snowpack server responses the file content in memory.That's why there is no such 'dist' folder.

More futher, if you try cmd 'snowpack build', you will see the 'dist' folder.

'snowpack dev' for development, using a web server locally

'snowpack build' for production, you can deploy the 'dist' folder to any other web servers

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 slebetman
Solution 2 Taurz

Related Questions