Typescript 如何知道 dist/index.js 在哪里,如果它不存在?



我有点不明白。我正在尝试学习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>

这个index.html是在"public"文件夹中。我还有index。ts。文件在"src"console.log("hello这是typescript还是javascript idk")。它确实给了我这个控制台日志,所以它似乎正在工作。

我不明白的是index.html如何试图寻找一个文件夹"dist"包含一个"索引"。文件,而不是"dist"文件夹,而不是"index.js"文件存在。我也有一个node_modules文件夹,但它也不存在。

这是如何工作的?是"距离";文件夹模拟之类的,而包含一个不存在的index.js文件,当这一切都在运行?

Typescript本身不知道,除非当你编译所有其他js文件编译器(babel/webpack等)将生成一个dist/index.js文件。

基本上就像编译你的c++文件来构建Google Chrome。c++不知道chrome.exe文件在哪里或者是什么,除了编译脚本/命令告诉它从源代码生成chrome.exe

注意:根据您的构建过程,目录可以命名为dist构建或目标或mootdrafters_website等。例如,react-create-app脚本没有将它的输出文件夹命名为dist但是生成build/index.js相反。

你如何运行你的样板代码,通过使用cmd 'snowpack dev'?

如果是,snowpack提供了一个运行在nodejs进程下的web服务器,并且'src/index '。Ts '已被编译为'dist/index.js'(在内存中)。当你的浏览器请求'dist/index.js'时,snowpack服务器会在内存中响应文件内容。这就是为什么没有这样的"dist"文件夹。

更进一步,如果你尝试cmd 'snowpack build',你会看到'dist'文件夹。

'snowpack dev'用于开发,使用本地web服务器

'snowpack build'用于生产环境,您可以将'dist'文件夹部署到任何其他web服务器上

最新更新