Vite构建Typescript简易原生前端项目

Alex程

已于 2024-07-23 09:38:06 修改

阅读量1.1k

点赞数 26

文章标签：前端 typescript

于 2024-07-22 18:00:14 首次发布

本文链接：https://blog.youkuaiyun.com/Alex_CYX/article/details/140605444

版权

一、Vite简介

什么是Vite？

Vite 是一个现代前端构建工具，由 Evan You 尤雨溪（Vue.js 的创造者）开发。它的设计理念是通过提供极速的开发体验和高效的构建流程来简化前端开发。

核心特点

极速启动和热更新： Vite 使用原生ES模块来实现即时的模块热更新HMR，大大加快了开发服务器的启动速度和页面更新速度。
按需构建： 在开发过程中，Vite 只会处理当前正在使用的模块，这避免了全量构建的浪费时间，提升了开发效率。
优化的生产构建： Vite 使用Rollup作为生产环境的打包工具，支持现代化的代码分割、Tree Shaking 和其他高级优化功能，确保构建出的代码在生产环境中表现出色。
插件系统： Vite 拥有丰富的插件生态，可以方便地扩展功能，支持各种前端框架和工具。
兼容性： Vite 支持主流的前端框架（Vue、React、Svelte 等）和语言（Javascript、TypeScript），并且能够与各种开发工具和工作流无缝集成。

二、环境准备

安装 Node.js 和 npm

Vite 需要 Node.js 环境来运行

下载 Node.js 并安装（包含npm）
终端输入node -v npm -v，验证安装是否成功

安装 Vite，创建项目

使用 npm 创建 Vite 项目
```
npm create vite@latest
```

根据引导，输入项目名

> npx
> create-vite

? Project name: » vite-project

选择框架

√ Project name: ... vite-project
? Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla		// 不使用框架
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

选择语言

√ Project name: ... vite-project
√ Select a framework: » Vanilla
? Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScript
    JavaScript

安装依赖

  cd vite-project	// 进入项目文件夹
  npm install		// 安装依赖
  npm run dev		// 可以进行测试

项目运行
npm run dev：启动本地开发服务器，默认http://localhost:5173/
npm run build：构建项目，将项目中的代码进行优化和压缩，并生成用于生产环境的文件。
npm run serve：

三、项目结构和配置

项目结构

vite-project/
│
├── node_modules/          	# 自动生成的目录，包含项目的所有依赖包，通常不需要修改
│   ├── .bin/                   # 二进制执行文件
│   ├── @esbuild/               # esbuild 相关包
│   ├── @rollup/                # rollup 相关包
│   ├── @types/                 # 类型定义包
│   ├── esbuild/                # esbuild 主包
│   ├── nanoid/                 # nanoid 包
│   ├── picocolors/             # picocolors 包
│   ├── postcss/                # postcss 包
│   ├── rollup/                 # rollup 主包
│   ├── source-map-js/          # source-map-js 包
│   ├── typescript/             # typescript 包
│   └── vite/                   # vite 主包
│
├── public/                	# 存放静态资源，如图标和图片，会被直接拷贝到构建输出中
│   └── vite.svg           		# Vite 相关 SVG 图标
│
├── src/                    # 源代码目录，包括 TypeScript 文件、CSS 文件和其他
│   ├── counter.ts              # 计数器组件的 TypeScript 文件
│   ├── main.ts                 # 应用的入口 TypeScript 文件
│   ├── style.css               # 应用的 CSS 文件
│   ├── typescript.svg          # TypeScript 相关 SVG 图标
│   └── vite-env.d.ts           # Vite 环境的 TypeScript 类型定义
│
├── .gitignore             	# Git 忽略文件，例如 node_modules
├── index.html              # 项目的入口 HTML 文件，Vite 会在这里注入构建后的 JavaScript 和 CSS
├── package-lock.json       # 用于锁定依赖版本，确保每次安装时使用相同的版本
├── package.json            # 定义项目的基本信息、脚本、依赖等
└── tsconfig.json           # TypeScript 的配置文件，指定 TypeScript 编译器的选项

tsconfig.json 配置文件

{
   
  "compilerOptions": {
   
    "target": "ES2020",					// 指定 ECMAScript 目标版本
    "useDefineForClassFields": true,	// 启用类字段的定义语法
    "module": "ESNext",					// 指定模块系统
    "lib": ["ES2020", "DOM", "DOM.Iterable"],	// 指定编译时需要包含的库文件
    "skipLibCheck": true,				// 跳过库文件的类型检查

    /* Bundler mode */
    "moduleResolution": "bundler",		// 模块解析策略，适用于打包工具
    "allowImportingTsExtensions": true,	// 允许导入 TypeScript 扩展名的文件
    "resolveJsonModule": true,			// 允许导入 JSON 模块
    "isolatedModules": true,			// 启用隔离模块
    "moduleDetection": "force",			// 强制模块检测
    "noEmit": true,	   					// 不生成编译输出文件

    /* Linting */
    "strict": true,						// 启用所有严格类型检查选项
    "noUnusedLocals": true,				// 禁止未使用的局部变量
    "noUnusedParameters": true,			// 禁止未使用的参数
    "noFallthroughCasesInSwitch": true	// 禁止 switch 语句贯穿
  },
  "include": ["src"]		// 指定要包含在编译中的文件或目录
}

编译目标（target）和模块（module）：
如果你需要支持更广泛的浏览器，可以考虑将 target 修改为 ES2015 或 ES2017。
如果你使用的是一些旧版的构建工具或需要兼容性，可以考虑将 module 修改为 CommonJS 或 AMD。
库文件（lib）：
如果你使用一些特定的浏览器 API 或 Node.js API，可以添加相应的库文件。例如，如果你需要使用 WebWorker，可以将其添加到 lib 数组中：
“lib”: [“ES2020”, “DOM”, “DOM.Iterable”, “WebWorker”]
严格模式（strict）：
如果你发现严格模式过于严格，可以关闭某些特定的检查。例如：
“strict”: true,
“noImplicitAny”: false
跳过库检查（skipLibCheck）：
如果你需要更严格的类型检查，可以将其设置为 false。
输出目录（outDir）：
如果你需要生成编译输出文件，可以指定输出目录：
“outDir”: “./dist”
源映射（sourceMap）：
如果你需要调试生成的 JavaScript 文件，可以启用源映射：
“sourceMap”: true
路径映射（paths）：
如果你有复杂的目录结构或使用别名，可以配置路径映射：
“baseUrl”: “./”,
“paths”: {
“@components/": ["src/components/”],
“@utils/": ["src/utils/”]
}

package.json 配置文件

{
   
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
   
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
   
    "typescript": "^5.2.2",
    "vite": "^5.3.1"
  }
}

name：项目的名称。
private：项目是否为私有项目。如果设置为 true，则无法将此项目发布到 npm 上。
version：项目的版本号。
type：指定模块的类型。“module” 表示项目使用 ES 模块（import 和 export 语法）。
scripts：定义了可以在命令行中运行的脚本。常用于自动化任务。
- “dev”：启动开发服务器，使用 Vite 运行开发模式。
  npm run dev
- “build”：先运行 TypeScript 编译器 (tsc) 编译 TypeScript 文件，然后使用 Vite 进行构建。