如何让Gulp识别React 18项目中的@路径别名？

在React 18项目中执行Gulp命令时出现以下TS2307错误：

src/service/chat/ConversationItemService.ts(2,38): error TS2307: Cannot find module '@/models/request/conversation/ConversationItemReq' or its corresponding type declarations.
src/service/chat/ConversationService.ts(2,34): error TS2307: Cannot find module '@/models/request/conversation/ConversationReq' or its corresponding type declarations.
src/service/goods/GoodsService.ts(1,35): error TS2307: Cannot find module '@/common/XHRClient' or its corresponding type declarations.
src/service/goods/GoodsService.ts(3,38): error TS2307: Cannot find module '@/action/iapproduct/IapProductAction' or its corresponding type declarations.
src/service/images/ImageService.ts(1,32): error TS2307: Cannot find module '@/action/images/ImageAction' or its corresponding type declarations.
src/service/images/ImageService.ts(2,35): error TS2307: Cannot find module '@/common/XHRClient' or its corresponding type declarations.
src/service/user/FeedbackService.ts(1,38): error TS2307: Cannot find module '@/action/user/UserAction' or its corresponding type declarations.

问题核心是Gulp无法识别@路径别名，当前已完成的配置如下：

1. tsconfig.json（TypeScript ^4.9.5）：

"compilerOptions": {
    "outDir": "build",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
}

2. Webpack 5配置：

const { override } = require('customize-cra');
const path = require("path");
 
module.exports = override(
     config =>{
         config.resolve.alias = {
             "@": path.resolve(__dirname, "src")
         };
         return config;
     },
);

@路径在项目中可正常使用，但Gulp编译时始终报错，尝试指定tsconfig.json执行命令后，仍出现TS2307及TS2300错误，编译失败。Gulp版本为CLI 2.3.0、本地4.0.2。

1. 借助tsconfig-paths让Gulp识别路径别名 #

TypeScript的paths配置需要额外工具支持Gulp解析，步骤如下：

• 安装依赖：

npm install tsconfig-paths --save-dev

• 在Gulp的TypeScript编译任务中引入并配置：

const gulp = require('gulp');
const ts = require('gulp-typescript');
const tsConfigPaths = require('tsconfig-paths');
const path = require('path');

// 加载并解析tsconfig中的路径配置
const tsConfig = require('./tsconfig.json');
tsConfigPaths.register({
  baseUrl: path.resolve(__dirname, tsConfig.compilerOptions.baseUrl),
  paths: tsConfig.compilerOptions.paths
});

// 定义TypeScript编译任务
gulp.task('compile-ts', () => {
  const tsProject = ts.createProject('tsconfig.json');
  return tsProject.src()
    .pipe(tsProject())
    .js.pipe(gulp.dest(tsConfig.compilerOptions.outDir));
});

2. 直接在gulp-typescript任务中配置路径映射 #

确保gulp-typescript版本为最新，在任务中显式继承tsconfig的路径规则：

const gulp = require('gulp');
const ts = require('gulp-typescript');

const tsProject = ts.createProject('tsconfig.json', {
  baseUrl: './',
  paths: {
    '@/*': ['src/*']
  }
});

gulp.task('compile-ts', () => {
  return tsProject.src()
    .pipe(tsProject())
    .js.pipe(gulp.dest('build'));
});

3. 检查tsconfig的文件包含规则 #

确认tsconfig.json的include字段覆盖所有需要编译的文件：

"include": ["src/**/*"],
"exclude": ["node_modules", "build"]

4. 清理缓存后重新编译 #

缓存可能导致解析异常，执行以下操作：

• 删除build目录
• 清除Node模块缓存：

npm cache clean --force

• 重新安装依赖：

npm install

• 重新执行Gulp编译任务

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