如何声明并使用本地模块？构建时无法解析ThemeFont模块求助

问题背景 #

• 在ThemeFont.ts中导出常量：

  export const FontXLarge = 18;
  

• 原本使用相对路径import {FontXLarge} from '../theme/ThemeFont';导入，VSCode可正常跳转至定义文件。
• 添加路径别名配置（"name": "theme"）后，改用import {FontXLarge} from 'theme/ThemeFont';导入，代码可运行但VSCode无法通过Ctrl/Alt+Click跳转到目标文件。
• 尝试手动声明模块：

  declare module 'ThemeFont' {
    export const FontXLarge = 18;
  }
  

  操作后VSCode跳转、hover显示恢复正常，但构建时报错：Unable to resolve module ThemeFont in node_modules。

解决方案 #

1. 同步构建工具与TypeScript的别名配置 #

仅在package.json或构建工具中配置别名无法让TypeScript识别，需在tsconfig.json中补充paths配置：

{
  "compilerOptions": {
    "baseUrl": "./", // 指定项目根目录
    "paths": {
      "theme/*": ["./src/theme/*"] // 将theme开头的路径映射到实际src/theme目录
    }
  }
}

同时在对应构建工具中配置别名：

• Vite（vite.config.ts）：

  import { defineConfig } from 'vite';
  export default defineConfig({
    resolve: {
      alias: {
        'theme': '/src/theme'
      }
    }
  });
  

• Webpack（webpack.config.js）：

  const path = require('path');
  module.exports = {
    resolve: {
      alias: {
        'theme': path.resolve(__dirname, 'src/theme')
      }
    }
  };
  

2. 移除手动声明的模块代码 #

手动添加的declare module 'ThemeFont'会让TypeScript将其识别为全局模块，但构建工具无法找到对应实际文件，导致报错。完成别名同步配置后，TypeScript会自动识别实际文件的导出内容，无需手动声明。

3. 刷新VSCode缓存 #

配置完成后，通过Ctrl+Shift+P执行TypeScript: Restart TS Server，或直接重启VSCode，让新配置生效。

验证 #

完成上述操作后，使用import {FontXLarge} from 'theme/ThemeFont';导入时：

• VSCode可正常通过Ctrl/Alt+Click跳转到ThemeFont.ts
• hover时能正确显示常量信息
• 构建过程无模块找不到的报错

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