Typescript自定义路径导入无法解析问题求助

针对你遇到的@libs/components模块找不到的问题，可按以下步骤排查修复：

1. 让Webpack识别TS路径映射 #

TS的paths配置仅作用于TS编译器，Webpack本身无法直接识别。你需要通过插件或手动配置让Webpack解析这些别名：

• 方案一：使用tsconfig-paths-webpack-plugin自动同步
  安装依赖：

  yarn add tsconfig-paths-webpack-plugin --dev
  

  在对应项目的Webpack配置文件中添加：

  const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
  const path = require('path');
  
  module.exports = {
    // ...其他配置
    resolve: {
      plugins: [
        new TsconfigPathsPlugin({
          configFile: path.resolve(__dirname, '../tsconfig.json') // 指向根目录的tsconfig
        })
      ]
    }
  };
  

• 方案二：手动配置Webpack alias
  直接在Webpack的resolve.alias中映射路径：

  const path = require('path');
  
  module.exports = {
    // ...其他配置
    resolve: {
      alias: {
        '@libs/components': path.resolve(__dirname, '../libs/components'),
        // 若有其他@libs子模块，依次添加
        '@libs/utils': path.resolve(__dirname, '../libs/utils')
      }
    }
  };
  

2. 校验根目录tsconfig配置正确性 #

确保根tsconfig.json的baseUrl和paths配置无误，且包含所有需要编译的文件：

{
  "compilerOptions": {
    "baseUrl": "./", // 根目录为基准路径
    "paths": {
      "@libs/*": ["libs/*"] // 通配符匹配所有@libs开头的模块
    },
    // ...其他编译选项
  },
  "include": ["apps/**/*", "libs/**/*"], // 确保包含apps和libs下的所有文件
  "exclude": ["node_modules"]
}

如果project-c有自己的子tsconfig.json，需确保它extends根配置，避免覆盖路径映射：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    // 仅添加项目专属配置，不要覆盖baseUrl和paths
  }
}

3. 检查libs模块的入口配置 #

确保libs/components目录有正确的入口文件：

• 在libs/components下创建index.ts，统一导出组件：

  export * from './YourComponent'; // 替换为实际组件文件
  

• 若使用package.json管理libs模块，可在libs/components/package.json中指定入口：

  {
    "main": "index.ts",
    "module": "index.ts"
  }
  

4. 确认目标项目的Webpack配置生效 #

由于你使用yarn dev --theme=project-c指定编译目标，需检查对应project-c的Webpack配置文件（如webpack.project-c.js）是否正确引入了上述resolve配置，没有被遗漏或覆盖。

5. 清除编译缓存 #

缓存可能导致旧配置残留，执行以下操作后重新编译：

yarn cache clean
rm -rf node_modules/.cache # 或对应缓存目录
rm -rf dist # 清除编译产物

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