如何使用 Vite 将 React TypeScript 应用程序部署到 Vercel

How to deploy React TypeScript app to Vercel with Vite

我正在尝试将 React TypeScript 项目部署到 Vercel，使用 Vite 构建。但是，Vercel 不会像 Heroku 那样在构建期间安装 devDependencies，因此它不知道“vite build”是什么（对于 tsc 也是如此）。

我已按照 Vite 指南部署 Vercel。

把 Vite 和 TypeScript 作为一个普通的依赖项包含进来感觉很奇怪，所以它会被包含在包中。我知道可以配置 Vite 以排除对你的包的某些依赖，但这真的是这样做的方法吗？

阅读这两条推文：

他说的是 CRA，但同样的原则也适用于这里的 vite。

因为 vite build 生成静态 HTML/CSS/JS 而不是节点应用程序，所以 devDependencies 和 dependencies 之间的区别没有实际意义。

严格来说，您的 package.json 列出了 构建您的静态包 到 构建您的应用程序 的代码所需的依赖项.

这类似于工厂需要油漆、电力、金属等来生产汽车，但是一旦汽车完成并离开工厂，它就 self-contained 并且拥有所有油漆和金属它需要。您的代码库（严格来说）是一个工厂，您的 package.json 列出了工厂的要求，而不是汽车本身。

TLDR；将它添加到 dependencies 非常好，它不会出现在最终的捆绑包中。

编辑： 如果您想知道为什么存在 dependencies 和 devDependencies 之间的区别，那是因为它旨在区分在正在进行 节点应用程序的生产操作（例如，对于服务 HTTP 请求的应用程序，核心网络模块）与只在本地需要的包（例如，代码格式化程序）。

当“生产”应用程序是一个临时脚本，它在构建管道中运行几秒钟以生成一些静态 HTML/CSS/JS，dependencies 和 devDependencies 之间的区别并不意义不大。这是一个常见的误解，认为它对最终在静态包中的内容有任何影响。