TypeScript配置 Watch的实现
更新时间：2026年07月05日 10:15:44 作者：youmatech
本文主要介绍了TypeScript配置 Watch的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
编译器支持使用环境变量配置如何监视文件和目录的变化。
使用TSC_WATCHFILE环境变量来配置文件监视
| 选项 | 描述 |
|---|---|
| PriorityPollingInterval | 使用fs.watchFile但针对源码文件，配置文件和消失的文件使用不同的轮询间隔 |
| DynamicPriorityPolling | 使用动态队列，对经常被修改的文件使用较短的轮询间隔，对未修改的文件使用较长的轮询间隔 |
| UseFsEvents | 使用 fs.watch，它使用文件系统事件（但在不同的系统上可能不一定准确）来查询文件的修改/创建/删除。注意少数的系统如Linux，对监视者的数量有限制，如果使用fs.watch创建监视失败那么将通过fs.watchFile来创建监视 |
| UseFsEventsWithFallbackDynamicPolling | 此选项与UseFsEvents类似，只不过当使用fs.watch创建监视失败后，回退到使用动态轮询队列进行监视（如DynamicPriorityPolling介绍的那样） |
| UseFsEventsOnParentDirectory | 此选项通过fs.watch（使用系统文件事件）监视文件的父目录，因此CPU占用率低但也会降低精度 |
| 默认 （无指定值） | 如果环境变量TSC_NONPOLLING_WATCHER设置为true，监视文件的父目录（如同UseFsEventsOnParentDirectory）。否则，使用fs.watchFile监视文件，超时时间为250ms。 |
使用TSC_WATCHDIRECTORY环境变量来配置目录监视
在那些Nodejs原生就不支持递归监视目录的平台上，我们会根据TSC_WATCHDIRECTORY的不同选项递归地创建对子目录的监视。 注意在那些原生就支持递归监视目录的平台上（如Windows），这个环境变量会被忽略。
| 选项 | 描述 |
|---|---|
| RecursiveDirectoryUsingFsWatchFile | 使用fs.watchFile监视目录和子目录，它是一个轮询监视（消耗CPU周期） |
| RecursiveDirectoryUsingDynamicPriorityPolling | 使用动态轮询队列来获取目录与其子目录的改变 |
| 默认 （无指定值） | 使用fs.watch来监视目录及其子目录 |
背景
在编译器中--watch的实现依赖于Nodejs提供的fs.watch和fs.watchFile，两者各有优缺点。
fs.watch使用文件系统事件通知文件及目录的变化。 但是它依赖于操作系统，且事件通知并不完全可靠，在很多操作系统上的行为难以预料。 还可能会有创建监视个数的限制，如Linux系统，在包含大量文件的程序中监视器个数很快被耗尽。 但也正是因为它使用文件系统事件，不需要占用过多的CPU周期。 典型地，编译器使用fs.watch来监视目录（比如配置文件里声明的源码目录，无法进行模块解析的目录）。 这样就可以处理改动通知不准确的问题。 但递归地监视仅在Windows和OSX系统上支持。 这就意味着在其它系统上要使用替代方案。
fs.watchFile使用轮询，因此涉及到CPU周期。 但是这是最可靠的获取文件/目录状态的机制。 典型地，编译器使用fs.watchFile监视源文件，配置文件和消失的文件（失去文件引用），这意味着对CPU的使用依赖于程序里文件的数量。
实用场景推荐配置
场景 1：大型项目（追求性能）
{
"watchOptions": {
"watchFile": "useFsEvents",
"watchDirectory": "useFsEvents",
"fallbackPolling": "dynamicPriorityPolling",
"excludeDirectories": ["**/node_modules", "dist", "coverage", ".git"]
}
}场景 2：虚拟机 / Docker / 文件系统事件不可靠的环境
{
"watchOptions": {
"watchFile": "dynamicPriorityPolling",
"watchDirectory": "dynamicPriorityPolling",
"fallbackPolling": "fixedInterval"
}
}场景 3：VS Code 集成任务
在 .vscode/tasks.json 中配置：
{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"option": "watch",
"problemMatcher": ["$tsc-watch"],
"group": "build",
"label": "tsc: watch"
}
]
}到此这篇关于TypeScript配置 Watch的实现的文章就介绍到这了,更多相关TypeScript配置 Watch内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript实现的简单烟花特效代码,涉及JavaScript数学运算及页面元素基于定时函数运动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了Openlayers学习之加载鹰眼控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了webpack3之loader全解析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。接下来通过本文给大家分享 JavaScript 执行机制，感兴趣的朋友一起看看吧2018-10-10
npm,yarn,pnpm都是前端常用的包管理工具,那它们3者之间又有什么区别呢,这篇文章主要介绍了npm、pnpm、yarn区别的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-12-12
javascript cookies 设置、读取、删除实例代码
javascript cookies 存、取、删除实例，也是不错的文章，跟我们整理的有些补充。2010-04-04
在JavaScript中Array对象提供了sort方法,用于对数组元素进行排序,这篇文章主要介绍了js Array sort实战排序的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2026-01-01
这篇文章主要介绍了ES6知识点整理之对象解构赋值应用,结合实例形式分析了ES6对象解构赋值相关概念、原理、出现的问题及相应解决方法,需要的朋友可以参考下2019-04-04
双问号操作符是ES2020引入的一个用于处理变量默认值的新特性,与传统的逻辑或操作符||不同,这篇文章主要介绍了JavaScript双问号操作符(??)详解及如何解决使用||时因类型转换带来的问题,需要的朋友可以参考下2025-04-04
排序的方法有很多，本节为大家介绍的是使用数组的push方法完成快速排序，当然你也可以举一反三2014-09-09
最新评论