使用web应用程序(浏览器)中的脚本type=“模块”直接处理ts/tsx文件

Question

使用vite dev服务器可以让我直接使用tsx/ts文件(无需打包甚至转储！)

<script type="module" src="../client/main.tsx"></script>

类型记录文件是动态转换的：

​

这真是太快了，而且加速了两个问题的发展：

1. 看来这只是为了发展。我能在生产中使用吗？(嵌入服务器应用程序)
2. 使用webpack (开发服务器)可以实现同样的结果吗？

Answer 1

Vite是一个伟大的发展框架。但是，在生产中，它将代码与卷起捆绑在一起，以支持较旧的浏览器。您可以阅读更多的这里。如果使用SSR，则需要创建两个独立的构建。Vite仍然会在服务器端动态地修改HTML，但是JS仍然会被捆绑。我还没有尝试在生产中使用ESM，但是您应该能够在使用类似ESBuild的东西构建之后静态地为您的传输(但仍然是ESM)源文件提供服务。但是，捆绑可以帮助解决文件大小和请求瀑布问题。Vite主要是为了开发人员的经验和对速度的巨大奖励而感到满意。

然而，Webpack并不是为此目的而建的。Webpack完全是个傻瓜，而Vite是一个发展框架。Webpack开发服务器监视代码中的更改，然后重新打包文件。Webpack专注于许多依赖关系的大型项目，而Vite则专注于现代概念。