解读

这道题表面问“合并”，实质考察候选人能否把 TypeScript 的编译时路径别名（baseUrl + paths）无缝嫁接到 Grunt 的构建管线里，让最终打包、压缩、转译、单元测试等任务都能找到正确文件，而不会出现“编译通过、运行找不到模块”的典型断层。国内项目普遍用 paths 做“@src/*、 @common/*”等绝对别名，但 Grunt 本身只认物理路径；如果候选人只会配 tsconfig.json 而不会同步改造 Gruntfile，就会在面试现场被追问“为什么本地起服务 404”“为什么 grunt-contrib-uglify 报找不到依赖”。因此，答题必须同时覆盖 TS 编译阶段与 Grunt 后处理阶段的路径解析一致性，并给出可落地的文件映射方案。

知识点

1. tsconfig 路径别名原理：baseUrl + paths 仅作用于 TypeScript 编译器（tsc），不会改写运行时 require/import 路径，更不会自动同步到 Grunt 插件。
2. Grunt 文件映射机制：grunt.initConfig 中每个任务通过 files 数组或 cwd/src/dest 描述“从哪读到哪写”，完全基于物理磁盘路径，与 TS 别名无交集。
3. 模块解析缺口：若仅用 grunt-ts 或 grunt-typescript 做转译，编译后 require("@src/utils") 仍保持别名，Node 或浏览器运行时无法解析，必须二次转换。
4. 国内主流补齐工具：
   • ttypescript + typescript-transform-paths：在 Grunt 中注册 ttsc 作为自定义编译器，编译阶段即把别名替换成相对路径，零运行时依赖。
   • tsconfig-paths/register：在 grunt-contrib-nodeunit 或自定义任务里先 -r tsconfig-paths/register，让测试进程能解析别名，保证单元测试阶段不断层。
   • grunt-replace + 自写正则：针对已打包的代码做字符串替换，适合无法改动编译器的遗留管线，但需维护正则列表，易出错。
5. 任务顺序与缓存：合并路径映射后，必须保证“TS 转译 → 路径替换 → 合并/压缩”三阶段顺序不可颠倒，否则后续任务基于错误路径再次解析会触发缓存雪崩。
6. sourcemap 一致性：若使用浏览器调试，路径替换插件需同步更新 sourcemap 中的 sources 数组，否则断点会飘到物理路径，调试体验降级。

答案

1. 安装依赖

   npm i -D ttypescript typescript-transform-paths grunt-ts grunt-contrib-clean grunt-contrib-uglify
   

2. 在 tsconfig.json 中声明别名

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

3. 在 Gruntfile.js 中把 ts 任务指向 ttsc，并注入路径转换插件

   module.exports = function(grunt) {
     grunt.initConfig({
       clean: { dist: 'dist' },
   
       ts: {
         default: {
           tsconfig: true,
           // 关键：使用 ttypescript 作为编译器
           compiler: 'ttypescript',
           // 把 typescript-transform-paths 插件传给 ttsc
           additionalFlags: '--plugins typescript-transform-paths'
         }
       },
   
       uglify: {
         dist: {
           files: [{
             expand: true,
             cwd: 'dist',
             src: '**/*.js',
             dest: 'dist'
           }]
         }
       }
     });
   
     grunt.loadNpmTasks('grunt-ts');
     grunt.loadNpmTasks('grunt-contrib-clean');
     grunt.loadNpmTasks('grunt-contrib-uglify');
   
     grunt.registerTask('default', ['clean', 'ts', 'uglify']);
   };
   

4. 验证

   • 源码中写 import { utils } from '@src/utils'
   • 运行 npx grunt 后查看 dist/**/*.js，引用已被替换为相对路径 require("../../utils")
   • 浏览器或 Node 端可直接运行，无模块找不到错误

5. 单元测试阶段若仍需别名
   在 grunt-contrib-nodeunit 任务前加

   process.env.TS_NODE_PROJECT = 'tsconfig.json';
   require('tsconfig-paths/register');
   

   保证测试进程复用同一份路径映射，实现编译与测试环境同源。

拓展思考

1. monorepo 场景：若使用 pnpm workspace，每个子包独立 tsconfig，需在 Gruntfile 里循环调用 ttsc 并动态传入 project 参数，保证各子包别名不串扰。
2. 微前端集成：主应用与微应用分别用 Grunt 构建，需在联邦模块（Module Federation）的 shared 配置里把别名映射成物理路径，否则 webpack 运行时无法匹配依赖版本。
3. 性能优化：大型项目路径替换耗时明显，可在 Grunt 中启用 grunt-newer 缓存，仅对变更文件做二次路径替换，缩短 CI 流水线 30%+ 时间。
4. 未来迁移：Grunt 已停止特性更新，国内团队若计划迁到 Vite/Rollup，可先把“tsconfig 路径 → 物理路径”这一步抽象成独立脚本，在 Grunt 与 Vite 侧共用，实现渐进式迁移，降低历史包袱。