配置监视 - vvll.net

配置监视 Configuring Watch

在 TypeScript 中，--watch 选项允许编译器监视文件变化，并在文件修改时自动重新编译。这对于开发者来说是一个非常有用的功能，可以提高开发效率，减少手动编译的次数。除了基本的 --watch 选项，TypeScript 提供了许多配置选项来定制监视行为。

基本使用

要使用 TypeScript 的 --watch 模式，只需要在命令行中添加 --watch 选项。例如：

tsc --watch

这会让 TypeScript 编译器监视当前目录及其子目录中的所有 TypeScript 文件，当这些文件发生变化时，编译器会自动重新编译。

配置 tsconfig.json

为了更方便地使用 --watch 选项，可以在 tsconfig.json 文件中配置监视模式。这允许你更灵活地控制监视行为。

基本 tsconfig.json 配置

创建一个基本的 tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*.ts"]
}

然后在命令行中运行：

tsc --watch

这会让 TypeScript 监视 src 目录中的所有 .ts 文件，并将编译后的输出放到 dist 目录中。

监视模式配置选项

TypeScript 提供了几个配置选项，可以在 tsconfig.json 中设置，以更好地控制监视模式。

watchOptions

在 tsconfig.json 文件中，你可以使用 watchOptions 来配置监视模式的行为：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*.ts"],
  "watchOptions": {
    "excludeDirectories": ["node_modules"],
    "excludeFiles": ["src/ignore/**/*.ts"],
    "watchFile": "useFsEvents",
    "watchDirectory": "useFsEvents",
    "fallbackPolling": "dynamicPriority"
  }
}

以下是 watchOptions 中的一些常用选项：

excludeDirectories: 排除特定的目录，不监视这些目录中的文件。
excludeFiles: 排除特定的文件，不监视这些文件。
watchFile: 设置文件监视策略。可选值有：
- "fixedPollingInterval": 固定的轮询间隔。
- "priorityPollingInterval": 优先级轮询间隔。
- "dynamicPriorityPolling": 动态优先级轮询。
- "useFsEvents": 使用文件系统事件（推荐）。
watchDirectory: 设置目录监视策略。可选值有：
- "useFsEvents": 使用文件系统事件（推荐）。
- "fixedPollingInterval": 固定的轮询间隔。
- "dynamicPriorityPolling": 动态优先级轮询。
fallbackPolling: 设置回退的轮询策略，当文件系统事件不可用时使用。可选值有：
- "fixedInterval": 固定的轮询间隔。
- "priorityPolling": 优先级轮询。
- "dynamicPriority": 动态优先级轮询。

使用 tsc-watch

tsc-watch 是一个第三方工具，提供了更高级的监视功能，例如在文件变化时自动运行自定义脚本。

安装 tsc-watch：
```
npm install --save-dev tsc-watch
```

配置 package.json：
在 package.json 中添加脚本来使用 tsc-watch：

{
  "scripts": {
    "watch": "tsc-watch --onSuccess \"node dist/index.js\""
  }
}

运行监视脚本：
```
npm run watch
```

这样，当 TypeScript 文件编译成功时，会自动运行 node dist/index.js 脚本。

示例：配置监视模式的项目

假设我们有以下项目结构：

/my-project
  /src
    index.ts
    utils.ts
  tsconfig.json
  package.json

tsconfig.json 文件内容：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*.ts"],
  "watchOptions": {
    "excludeDirectories": ["node_modules"],
    "excludeFiles": ["src/ignore/**/*.ts"],
    "watchFile": "useFsEvents",
    "watchDirectory": "useFsEvents",
    "fallbackPolling": "dynamicPriority"
  }
}

package.json 文件内容：

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "watch": "tsc --watch",
    "watch:advanced": "tsc-watch --onSuccess \"node dist/index.js\""
  },
  "devDependencies": {
    "typescript": "^4.5.2",
    "tsc-watch": "^4.2.9"
  }
}

运行监视模式

使用 TypeScript 内置的 --watch 模式：
```
npm run watch
```
使用 tsc-watch 提供的高级监视功能：
```
npm run watch:advanced
```

总结

TypeScript 的监视模式是开发过程中提高效率的有力工具。通过配置 tsconfig.json 中的 watchOptions，可以定制监视行为以适应不同的开发需求。对于更高级的使用场景，可以借助 tsc-watch 等第三方工具，实现文件变化时自动运行自定义脚本的功能。

参考

https://www.typescriptlang.org/docs/handbook/configuring-watch.html