随着 TypeScript 在前端开发中的广泛应用，如何有效管理 TypeScript 项目也越来越重要。tsc-multi-watch 是一个方便的 npm 包，可以用于自动更新 TypeScript 项目的编译结果。
安装
首先，你需要在项目的根目录下安装 tsc-multi-watch：
npm install tsc-multi-watch --save-dev
配置
在项目根目录中创建一个 tsc-multi-watch.json 文件，并配置如下：
-- -------------------- ---- -------
-
----------- -
-
---------- ------
------- ------ ---------------------
-------- -----
-
-
-commands是一个数组，表示要执行的命令列表，这里只有一个命令，所以只有一个元素。command表示要执行的命令，这里使用tsc编译 TypeScript。args表示命令行参数，在这里我们告诉tsc使用位于src/tsconfig.json的 TypeScript 配置文件。watch表示要监视的文件夹，当文件夹中的文件发生变化时，命令将自动重新执行。
如果你需要监视多个文件夹，可以在 commands 数组中添加更多的元素。例如：
-- -------------------- ---- -------
-
----------- -
-
---------- ------
------- ------ ---------------------
-------- -----
--
-
---------- --------
------- ------ ----------------------- -----------------
-------- ------------
--
-
---------- --------
------- ---------- ----- -----------
-------- --------
-
-
-使用
在项目根目录下运行以下命令：
npx tsc-multi-watch
这会读取 tsc-multi-watch.json 文件，执行其中的命令，并在文件发生变化时自动重新执行。
示例
下面是一个使用 tsc-multi-watch 的简单示例。我们将创建一个简单的 TypeScript 应用，它会将页面上的按钮点击次数递增，并将其显示在页面上。
1. 初始化项目
首先，在空白目录中创建一个 package.json 文件：
npm init -y
2. 安装依赖
然后，安装必要的依赖：
npm install typescript ts-loader webpack webpack-cli webpack-dev-server tsc-multi-watch --save-dev npm install react react-dom @types/react @types/react-dom --save
3. 编写代码
在项目根目录下创建一个名为 src 的文件夹，并在其中创建一个 index.tsx 文件：
-- -------------------- ---- -------
------ - -------------- -------- - ---- --------
------ - ------ - ---- ------------
-------- ----- -
----- ------- --------- - ------------
-------- ------------- -
-------------- - ---
-
------ -
-----
---------- -----------
------ ------- --- ------ ------- ----------
------- --------------------------- -----------
------
--
-
----------- --- --------------------------------然后，在根目录下创建一个 webpack.config.js 文件：
-- -------------------- ---- -------
-------------- - -
------ ------------------
------- -
----- --------- - --------
--------- ------------
--
------- -
------ -
-
----- ----------
---- ------------
-------- ---------------
--
--
--
-------- -
----------- -------- ------ -------
--
--最后，在根目录下创建一个 tsc-multi-watch.json 文件：
-- -------------------- ---- -------
-
----------- -
-
---------- ----------
------- ----------- ----------- ---------------------
-------- -----
-
-
-4. 运行项目
运行以下命令：
npx tsc-multi-watch
使用浏览器打开 dist/index.html，你就可以看到应用的效果了。每次你更改 TypeScript 或 JavaScript 文件时，tsc-multi-watch 会自动更新编译结果，并自动触发 webpack 的重新打包。这使得开发过程更加高效。
结论
tsc-multi-watch 是一个非常有用的 npm 包，可以帮助我们自动更新 TypeScript 项目的编译结果。使用它，可以显著提高项目开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e081e8991b448e0628