Vite 打包 TypeScript 项目

使用 Vite 打包 TypeScript 项目非常简单，因为 Vite 对 TypeScript 提供了开箱即用的支持。以下是配置 Vite 打包 TypeScript 项目的详细步骤：

1. 创建项目

首先，你可以使用 Vite 创建一个新项目。确保你的环境中已安装了 Node.js。

使用以下命令创建一个新的 Vite 项目：

   

npm create vite@latest my-ts-project --template vanilla-ts

这将会创建一个名为 my-ts-project 的新目录，使用 TypeScript 模板。

2. 进入项目目录

进入新创建的项目目录：

cd my-ts-project

3. 安装依赖

安装项目所需的依赖：

npm install

4. Vite 配置

在项目根目录下，你会看到 vite.config.ts 文件。这个文件是 Vite 的配置文件，通常你可以直接使用默认配置，但可以根据需要进行修改。以下是一个简单的 Vite 配置示例：

   

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  // 配置选项
  server: {
    port: 3000, // 设置开发服务器端口
  },
  // 可以添加其他插件或配置
});

5. TypeScript 配置

在项目根目录中，应该已经存在一个 tsconfig.json 文件。你可以根据需要进行修改。以下是一个基本的 TypeScript 配置示例：

    

{
  "compilerOptions": {
    "target": "ESNext", // 编译后的目标版本
    "module": "ESNext", // 使用 ES 模块
    "strict": true, // 启用严格模式
    "jsx": "preserve", // 保留 JSX 代码
    "esModuleInterop": true, // 兼容 CommonJS 模块
    "skipLibCheck": true // 跳过库文件检查
  },
  "include": ["src/**/*"], // 包含的文件
  "exclude": ["node_modules"] // 排除的文件
}

6. 运行开发服务器

使用以下命令启动开发服务器：

npm run dev
在浏览器中访问 http://localhost:3000，你应该能看到你的项目正在运行。

7. 打包项目

要打包项目，可以使用以下命令：

npm run build
构建完成后，生成的文件会在 dist 目录下。

8. 其他配置（可选）

添加插件: Vite 支持各种插件，例如处理 CSS、图像和其他文件类型。你可以在 vite.config.ts 中根据需要添加插件。

环境变量: Vite 支持使用 .env 文件来配置环境变量。你可以创建 .env 文件并添加变量，例如：

VITE_API_URL=https://api.example.com
在代码中使用这些变量时，前缀必须是 VITE_：

console.log(import.meta.env.VITE_API_URL);
示例项目结构
你的项目结构可能类似于以下示例：

      

my-ts-project/
├── dist/
├── node_modules/
├── src/
│   ├── main.ts
│   └── style.css
├── .env
├── package.json
├── tsconfig.json
└── vite.config.ts

9 总结
Vite 提供了一种简单而高效的方式来构建和打包 TypeScript 项目。通过上面的步骤，你可以快速设置并运行一个 Vite + TypeScript 的开发环境。