使用 Vite 设置 TypeScript 项目

摘要：在本教程中，您将学习如何设置一个使用 TypeScript 和 Vite 的 Web 项目，将 TypeScript 编译成 JavaScript。

Vite 是一款前端构建工具，为现代 Web 项目提供更快速、更精简的开发体验。 “Vite” 在法语中意为“快”，体现了它的目标。

设置 TypeScript 项目

我们将逐步向您展示如何使用 Vite 设置 TypeScript 项目

步骤 1. 安装 Node.js

在 Windows 上打开命令提示符或在 macOS 上打开终端，检查您的计算机上是否安装了 Node.js

node -v

如果您遇到错误，则表示 Node.js 不可用。您需要从 下载并安装 Node.js 官方网站。

步骤 2. 创建 Vite 项目

打开终端并使用以下命令创建一个新的 Vite 项目

npm create vite@latestCode language: CSS (css)

如果您的计算机上没有安装 Vite，它会提示您安装它

Need to install the following packages:
create-vite@5.5.2
Ok to proceed? (y) yCode language: CSS (css)

输入 y 以继续安装。请注意，您可能在上面看到更高的版本。

安装 create-vite 包后，系统会提示您命名项目、选择框架以及选择变体

√ Project name: ... myapp
√ Select a framework: » Vanilla
√ Select a variant: » TypeScript

在本例中，我们使用 myapp 作为项目名称，Valilla 作为框架，以及 TypeScript 作为变体。

该命令将在与项目名称相同的目录中搭建项目

Scaffolding project in D:\myapp...

Done. Now run:

  cd myapp
  npm install
  npm run dev

步骤 3. 导航到项目目录

导航到项目目录

cd myapp

步骤 4. 安装依赖项

通过运行 npm install 命令来安装必要的依赖项

npm install

步骤 5. 启动开发服务器

运行以下命令启动开发服务器

npm run dev

它将返回以下输出

> myapp@0.0.0 dev
> vite


  VITE v5.4.1  ready in 275 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show helpCode language: CSS (css)

在 Web 浏览器上打开 https://:5173/，您将看到该应用程序。

要停止开发服务器，您可以按 Ctrl+C。

检查项目结构

这是项目结构

├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
|  └── vite.svg
├── src
|  ├── counter.ts
|  ├── main.ts
|  ├── style.css
|  ├── typescript.svg
|  └── vite-env.d.ts
└── tsconfig.jsonCode language: PHP (php)

以下是项目中的文件和目录（我们将重点关注主要文件）

index.html

这是应用程序的入口点。index.html 包含 src/main.ts 文件，它是主要的 TypeScript 文件。

在开发过程中，Vite 会将此 src/main.ts 文件编译成 JavaScript 包并将其注入到 index.html 文件中。

src/main.ts

这是应用程序的入口点。在此 main.ts 文件中。

style.css

此文件存储应用程序的 CSS 代码。您可以使用导入语句在应用程序中使用它

import './style.css';Code language: JavaScript (javascript)

请注意，由于 Vite 处理资产捆绑和处理的方式，您可以像 JavaScript 文件一样导入 CSS 文件。因此，您不必在 HTML 中手动链接样式表。

package.json

此 package.json 文件用于管理依赖项、脚本和配置。

node_modules/

此目录包含所有已安装的 npm 包及其依赖项。当您执行 npm install 命令时，它将在此文件夹中安装 package.json 文件中列出的所有包。

tsconfig.json

这是 TypeScript 配置文件，其中包含编译器选项、文件包含/排除以及其他设置。它定义了 TypeScript 的行为方式。

自定义项目

步骤 1. 从 src 目录中删除 counter.ts 文件。此步骤是可选的。

步骤 2. 将 src/main.ts 文件中的所有代码替换为以下内容

import './style.css';

const app = document.querySelector<HTMLDivElement>('#app');
app!.innerHTML = '<h1>Hello, TypeScript!</h1>';Code language: JavaScript (javascript)

它是如何工作的。

首先，将 style.css 导入到 main.ts 文件中

import './style.css';Code language: JavaScript (javascript)

其次，选择 app 元素并将它的 innerHTML 更改为 HTML 片段

const app = document.querySelector<HTMLDivElement>('#app');
app!.innerHTML = '<h1>Hello, TypeScript!</h1>';Code language: JavaScript (javascript)

第三，运行开发服务器，您将看到文本 Hello, TypeScript!

构建用于生产的项目

运行以下命令构建用于生产的项目

npm run build

它将在 dist 目录中创建一个经过优化的生产构建，其结构如下

├── assets
|  ├── index-Cz4zGhbH.css
|  └── index-NXap3Nzt.js
├── index.html
└── vite.svg

要在本地预览生产构建，您可以运行以下命令

npm run preview

此命令将启动一个本地服务器，以便您可以在 https://:4173/ 上查看产品构建

> myapp@0.0.0 preview
> vite preview

  ➜  Local:   http://localhost:4173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show helpCode language: CSS (css)

现在，您可以开始使用 Vite 开发 TypeScript 应用程序。祝您编程愉快！