如果 dist/index.js 不存在，Typescript 如何知道它在哪里？
[英]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:我正在尝试学习 Typescript，我使用 Snowpack 得到了这个样板代码，它包含一个 index.html 文件，该文件引用“dist/index.js”作为其脚本，如下所示：
<!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.这个 index.html 东西在“public”文件夹中。 I also have "index.ts" file in the "src" folder, which only does a console.log("hello is this typescript or javascript idk") .我在“src”文件夹中也有“index.ts”文件，它只做一个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.我不明白的是 index.html 如何尝试查找包含“index.js”文件的文件夹“dist”，而“dist”文件夹和“index.js”文件都不存在。 I also have a node_modules folder but it doesn't exist there either.我也有一个 node_modules 文件夹，但那里也不存在。
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?是否模拟了“dist”文件夹或其他东西，同时在整个运行时包含一个不存在的 index.js 文件？
2 个解决方案
解决方案1
0 2022-05-13 09:25:11
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. Typescript 本身不知道，除了当您编译所有其他 js 文件时，编译器（babel/webpack 等）将生成一个dist/index.js文件。
Basically it's like compiling your C++ file to build Google Chrome.基本上，这就像编译您的 C++ 文件来构建 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.除了构建脚本/命令告诉它从源代码生成chrome.exe之外，C++ 不知道chrome.exe文件在哪里或在哪里。
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.
解决方案2
0 2022-05-13 10:26:29
How did you run your boilerplate code, by using cmd 'snowpack dev'?您是如何使用 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.如果是这样，snowpack 提供了一个运行在 nodejs 进程中的 Web 服务器，并且 'src/index.ts' 已被转换为 'dist/index.js'（在内存中）。当您的浏览器请求 'dist/index.js' 时，雪包服务器响应内存中的文件内容。这就是为什么没有这样的“dist”文件夹的原因。
More futher, if you try cmd 'snowpack build', you will see the 'dist' folder.更进一步，如果您尝试 cmd 'snowpack build'，您将看到 'dist' 文件夹。
'snowpack dev' for development, using a web server locally 'snowpack dev' 用于开发，在本地使用 Web 服务器
'snowpack build' for production, you can deploy the 'dist' folder to any other web servers 'snowpack build' 用于生产，您可以将'dist' 文件夹部署到任何其他 Web 服务器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.