Node环境下TypeScript转译优化方案及替代工具问询

针对你当前用WebStorm + Gulp backend:watch任务转译TS到/build目录时速度慢（每次2-3秒）的问题，我整理了几个优化方向，同时解答你关于ts-node的疑问：

一、给当前Gulp任务提速的关键优化点 #

1. 启用TypeScript增量编译 #

你当前的tsCompile函数已经用了gulp-cached，但TypeScript本身的增量编译（incremental模式）能更高效地复用之前的编译结果，只重新编译变更的文件及其依赖。

修改步骤：

• 在tsconfig.json里添加增量编译配置：

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": "./build/tsconfig.tsbuildinfo" // 存储编译缓存信息
  }
}

• 更新tsCompile函数，使用TypeScript的增量编译API：

function tsCompile(path, dest, baseDir, done) {
  const ts = plugin.typescript;
  // 启用增量编译模式
  const tsProject = ts.createProject('tsconfig.json', { incremental: true });
  gulp
    .src(path, {base: baseDir})
    .pipe(plugin.cached('code'))
    .pipe(plugin.sourcemaps.init())
    // 用incremental()替代直接调用tsProject，利用缓存
    .pipe(tsProject.incremental(ts.reporter.defaultReporter())).js
    .pipe(plugin.sourcemaps.write('.'))
    .pipe(gulp.dest(dest))
    .on('error', done)
    .on('end', done);
}

这个优化能大幅减少重复编译的时间，尤其是后续文件变更时，只会处理改动的部分。

2. 优化监听任务的触发逻辑 #

当前backend:watch:code每次文件变更都会跑整个backend:compile任务，其实可以只针对变更的单个文件编译（配合增量编译处理依赖）：

gulp.task('backend:watch:code', function () {
  const watcher = gulp.watch([appCodeRelativeGlob]);
  watcher.on('change', function (event) {
    if (event.type === 'deleted') {
      delete plugin.cached.caches.code[event.path];
      delete plugin.event.caches.lint[event.path];
      del(getPathFromSourceToBuild(event.path, appSourceDir, appBuildDir));
      // 删除编译缓存文件，强制重新处理依赖链
      del('./build/tsconfig.tsbuildinfo');
    } else {
      // 仅编译变更的单个文件
      tsCompile([event.path], appBuildDir, appSourceDir, () => {});
    }
  });
});

3. 升级依赖包 #

确保gulp-typescript、typescript都是最新版本——新版本的TypeScript编译器在增量编译和转译速度上有不少优化，旧版本可能存在性能瓶颈。

二、关于ts-node的疑问解答 #

ts-node的定位是直接运行TypeScript代码，不需要预先编译成JS文件，适合开发阶段快速启动服务（比如配合ts-node-dev监听变更重启），但它并不能替代Gulp生成/build目录下的JS产物。

如果你的开发流程不需要保留编译后的JS文件（比如直接跑TS服务），那ts-node确实会比Gulp编译更快；但如果必须输出/build目录的产物用于部署，那优化Gulp流程或改用官方工具更合适。

三、更轻量的替代方案：直接用tsc watch + 文件复制脚本 #

如果你的Gulp任务除了编译TS和复制文件外没有其他复杂逻辑，直接用TypeScript官方的tsc --watch会更高效——没有Gulp流的额外开销，官方编译器的优化更到位。

配置步骤：

1. 调整tsconfig.json，指定输出目录和源文件：

{
  "compilerOptions": {
    "outDir": "./build",
    "rootDir": "./app",
    "incremental": true,
    "sourceMap": true
  },
  "include": ["app/**/*"]
}

2. 写一个简单的脚本copy-non-ts.js来复制非TS文件：

const chokidar = require('chokidar');
const fs = require('fs-extra');
const path = require('path');

const appSourceDir = path.join(__dirname, 'app');
const appBuildDir = path.join(__dirname, 'build');

// 监听所有非TS文件
chokidar.watch([`${appSourceDir}/**/*`, `!${appSourceDir}/**/*.ts`], { ignoreInitial: false })
  .on('add', (file) => {
    const destPath = path.join(appBuildDir, path.relative(appSourceDir, file));
    fs.copySync(file, destPath);
  })
  .on('change', (file) => {
    const destPath = path.join(appBuildDir, path.relative(appSourceDir, file));
    fs.copySync(file, destPath);
  })
  .on('unlink', (file) => {
    const destPath = path.join(appBuildDir, path.relative(appSourceDir, file));
    fs.removeSync(destPath);
  });

3. 用concurrently并行运行两个命令（需要先安装：npm i -D concurrently chokidar fs-extra）：

concurrently "tsc --watch" "node copy-non-ts.js"

这个方案的转译速度会比Gulp快很多，因为直接用官方工具，没有中间层的损耗。

总结 #

• 若坚持用Gulp：优先开启增量编译，优化监听逻辑，升级依赖；
• 若无需Gulp复杂任务：用tsc --watch + 简单复制脚本，速度最优；
• ts-node适合直接运行TS的场景，不适合需要输出编译产物的需求。

内容的提问来源于stack exchange，提问作者Ivan Proskuryakov