vite功能之---TypeScript

Vite 天然支持引入 .ts 文件

意思是不需要额外配置,vite内置了对.ts文件的转译

vite仅执行转译

  • 请注意,Vite 仅执行 .ts 文件的转译工作,并不执行 任何类型检查。并假定类型检查已经被你的 IDE 或构建过程处理了。
  • Vite 之所以不把类型检查作为转换过程的一部分,是因为这两项工作在本质上是不同的。转译可以在每个文件的基础上进行,与 Vite 的按需编译模式完全吻合。相比之下,类型检查需要了解整个模块图。把类型检查塞进 Vite 的转换管道,将不可避免地损害 Vite 的速度优势。

vite如何对ts文件进行类型检查

  • 在构建生产版本时,你可以在 Vite 的构建命令之外运行 tsc --noEmit

  • 在开发时,如果你需要更多的 IDE 提示,我们建议在一个单独的进程中运行 tsc --noEmit --watch,或者如果你喜欢在浏览器中直接看到上报的类型错误,可以使用 vite-plugin-checker。

TypeScript 编译器选项

tsconfig.json 是 TypeScript 项目的配置文件,用于指定 TypeScript 编译器的选项。它包含了一系列配置项,帮助开发者控制编译过程、输出内容以及编译的环境等

tsconfig.json文件的基本结构

{"compilerOptions": {// 编译器选项配置项},"include": [// 包含的文件或文件夹],"exclude": [// 排除的文件或文件夹],"files": [// 显式列出要包含的文件],"extends": "./base.tsconfig.json","references": [// 项目引用]
}

compilerOptions: compilerOptions配置项详解-CSDN博客

include:include配置项详解-CSDN博客

exclude:exclude配置项详解-CSDN博客

files:files 配置项详解-CSDN博客

extends:files 配置项详解-CSDN博客

references:references配置项详解-CSDN博客

客户端类型的背景

vite.config.json 文件中,"客户端类型"(client type)通常是指针对不同的构建目标,Vite 如何处理和优化客户端代码的设置。Vite 是一个现代化的前端构建工具,它支持多种构建目标,包括不同的 JavaScript 环境。通过配置文件中的相关选项,开发者可以指定构建的客户端类型,以便 Vite 更好地进行优化。

客户端类型的背景

  • Vite 的构建目标通常是浏览器(客户端)或 Node.js(服务器端),不同的构建目标会影响 Vite 如何处理代码的转换、优化和构建输出。
  • 客户端类型(通常指的是 targetbuild.target 配置项)决定了构建过程中代码的转译策略。Vite 会根据目标环境选择不同的编译选项,比如 JavaScript 的特性、Polyfill 和压缩等。

target 配置项

  • JavaScript 语法转译:例如,是否支持旧版本的浏览器(例如 IE11)。
  • Polyfill 的引入:对于不支持某些现代 JavaScript 特性的浏览器,Vite 可能会自动引入 Polyfill。
  • 代码优化:Vite 会根据目标环境对代码进行优化,比如去除不必要的代码,或者转换成更兼容的版本。

browserslist 配置

你还可以在项目根目录中通过 browserslist 配置来设置客户端类型,Vite 会根据这个配置来决定如何编译代码。

browserslist 允许你指定支持的浏览器版本,Vite 会根据这些要求生成相应的构建输出。

Vite 构建的目标环境

Vite 支持的客户端类型通常指代浏览器目标环境。例如,开发者可能需要构建适合 现代浏览器(如 Chrome、Firefox)或者 兼容性较差的旧版浏览器(如 IE11)的代码。根据不同的需求,Vite 可以调整编译方式,以优化浏览器兼容性或提升性能。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/68297.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ中有哪几种交换机类型?

大家好,我是锋哥。今天分享关于【RabbitMQ中有哪几种交换机类型?】面试题。希望对大家有帮助; RabbitMQ中有哪几种交换机类型? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在RabbitMQ中,交换机&#xf…

11-1.Android 项目结构 - androidTest 包与 test 包(单元测试与仪器化测试)

androidTest 包与 test 包 在 Android 项目中,androidTest 包与 test 包用于存放不同类型的测试代码的 1、测试类型 (1)androidTest 包 主要用于存放单元测试(Unit Tests)代码 单元测试是针对应用程序中的独立模块…

HTML拖拽功能(纯html5+JS实现)

1、HTML拖拽--单元行拖动 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><…

PHP 字符串

PHP 字符串 引言 在 PHP 中&#xff0c;字符串是一种非常基础且重要的数据类型。字符串可以包含字母、数字、标点符号以及特殊字符。PHP 提供了丰富的字符串函数&#xff0c;使得字符串操作变得简单而高效。本文将详细介绍 PHP 中字符串的常用操作&#xff0c;包括字符串的创…

SpringMVC复习笔记

文章目录 SpringMVC 概念和基本使用SpringMVC 简介SpringMVC 核心组件和调用流程SpringMVC 基本使用第一步&#xff1a;导入依赖第二步&#xff1a;Controller 层开发第三步&#xff1a;SpringMVC 配置类配置核心组件第四步&#xff1a;SpringMVC 环境搭建第五步&#xff1a;部…

AR 在高校实验室安全教育中的应用

AR应用APP可以内置实验室安全功能介绍&#xff0c;学习并考试&#xff08;为满足教育部关于实验室人员准入条件&#xff09;&#xff0c;AR主模块。其中AR主模块应该包括图形标识码的扫描&#xff0c;生成相应模型&#xff0c;或者火灾、逃生等应急处置的路线及动画演示。考试采…

vscode离线安装插件--终极解决方案

目录 离线安装插件安装方法 vscode连接远程服务器中的docker远程连接python jupyter开发 离线安装插件 使用vscode开发过程中&#xff0c;有一些内网服务器没法连接外网&#xff0c;造成安装插件不方便&#xff0c;网络上很多文章提供了很多方法&#xff0c;比较常见的一种是&…

记录一次Android Studio的下载、安装、配置

目录 一、下载和安装 Android Studio 1、搜索下载Android studio ​2、下载成功后点击安装包进行安装&#xff1a; 3、这里不用打勾&#xff0c;直接点击安装 &#xff1a; 4、完成安装&#xff1a; 5、这里点击Cancel就可以了 6、接下来 7、点击自定义安装&#xff1a…

字节序 大端和小端

目录 什么是 大端存储和小端存储&#xff1f;为什么会有大小端转换问题如何检查自己电脑 是大端还是小端&#xff1f;大端小端处理函数使用位运算操作来手动转换大端和小端。使用标准库中的htonl和ntohl函数代码示例&#xff1a; 什么是 大端存储和小端存储&#xff1f; 大端模…

Kylin Linux V10 替换安装源,并在服务器上启用 EPEL 仓库

查看系统版本&#xff1a; cat /etc/os-releaseNAME"Kylin Linux Advanced Server" VERSION"V10 (Lance)" ID"kylin" VERSION_ID"V10" PRETTY_NAME"Kylin Linux Advanced Server V10 (Lance)" ANSI_COLOR"0;31"u…

可以用于分割字符串的方法(python)

一、str.split(sep,maxsplit)函数&#xff08;返回列表&#xff09; sep&#xff1a;分隔符 maxsplit&#xff1a;分割次数 a"Hello world" list1a.split(" ",1) print(list1) 结果&#xff1a; [Hello, world] 二、str.rsplit(sep,maxsplit)函数&…

[MySQL | 二、基本数据类型]

基本数据类型 一、数值类型举例表结构1. 整数类型zerofill属性 与 int(n) 中 n 的关系 2.bit类型3. 小数类型float类型decimal类型 二、字符串类型1. char2. varchar如何选择定长或变长字符串&#xff1f; 3. 日期时间类型(date datetime timestamp)4. enum枚举类型5. set多选类…

金融项目实战 03|JMeter脚本实现手工接口测试

目录 一、环境说明 1、项目环境搭建 2、Mock说明 二、构造测试数据 1、通过系统页面构造 2、通过接口构造 3、通过数据库构造【推荐】 4、案例&#xff1a;构造借款业务数据 三、JMeter执行接口测试用例 1、获取图片验证码、获取短信验证码 2、注册脚本 3、登录脚本…

【优先算法】滑动窗口--(结合例题讲解解题思路)(C++)

目录 1. 例题1&#xff1a;最大连续1的个数 1.1 解题思路 1.2代码实现 1.3 错误示范如下&#xff1a;我最开始写了一种&#xff0c;但是解答错误&#xff0c;请看&#xff0c;给大家做个参考 2. 将 x 减到 0 的最小操作数 2.1解题思路 2.2代码实现 1. 例题1&#xff…

JDK17语法新增

1.yield关键字: 2.var关键字&#xff1a; 3.密封类&#xff1a; ⼀般应⽤在类和接⼝中&#xff0c;对接⼝和类的实现和继承进⾏约束。主要使⽤的关键字是 final 。当这个类被 final 修饰了&#xff0c;被修饰的类就变成完全封闭的状态了&#xff0c;所有类都没办法继承。…

Go可以使用设计模式,但绝不是《设计模式》中的那样

文章精选推荐 1 JetBrains Ai assistant 编程工具让你的工作效率翻倍 2 Extra Icons&#xff1a;JetBrains IDE的图标增强神器 3 IDEA插件推荐-SequenceDiagram&#xff0c;自动生成时序图 4 BashSupport Pro 这个ides插件主要是用来干嘛的 &#xff1f; 5 IDEA必装的插件&…

TCP 序列和确认号说明 | seq 和 ack 号计算方法

注&#xff1a;本文为 “TCP 序列” 相关文章合辑。 英文引文机翻未校。 TCP Sequence and Acknowledgement Numbers Explained TCP 序列和确认编号说明 TCP Sequence (seq) and Acknowledgement (ack) numbers help enable ordered reliable data transfer for TCP streams…

设计模式03:行为型设计模式之策略模式的使用情景及其基础Demo

1.策略模式 好处&#xff1a;动态切换算法或行为场景&#xff1a;实现同一功能用到不同的算法时和简单工厂对比&#xff1a;简单工厂是通过参数创建对象&#xff0c;调用同一个方法&#xff08;实现细节不同&#xff09;&#xff1b;策略模式是上下文切换对象&#xff0c;调用…

《数据思维》之数据可视化_读书笔记

文章目录 系列文章目录前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 数据之道&#xff0c;路漫漫其修远兮&#xff0c;吾将上下而求索。 一、数据可视化 最基础的数据可视化方法就是统计图。一个好的统计图应该满足四个标准&#xff1a;准确、有…

【AIGC】SYNCAMMASTER:多视角多像机的视频生成

标题&#xff1a;SYNCAMMASTER: SYNCHRONIZING MULTI-CAMERA VIDEO GENERATION FROM DIVERSE VIEWPOINTS 主页&#xff1a;https://jianhongbai.github.io/SynCamMaster/ 代码&#xff1a;https://github.com/KwaiVGI/SynCamMaster 文章目录 摘要一、引言二、使用步骤2.1 TextT…