Webpack+Babel构建ES模块后IntelliJ Idea无法高亮自定义模块导入

1. 修正jsconfig.json配置 #

你当前的jsconfig.json路径配置和实际导入路径不匹配，需要调整paths的键来完全对应@modules/my-custom-module这个导入别名：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@modules/my-custom-module": ["./node_modules/@modules/my-custom-module/dist/module.js"]
    }
  },
  "include": ["src/**/*", "node_modules/@modules/my-custom-module/dist/**/*"]
}

• 键名必须和导入语句里的模块名完全一致，IDE才能正确映射到实际文件
• 添加include字段，确保IDE能扫描到自定义模块的文件目录

2. 检查自定义模块的package.json配置 #

确认@modules/my-custom-module包内的package.json中，main字段指向正确的入口文件：

{
  "main": "dist/module.js"
}

如果缺失这个字段，IDE可能无法自动识别模块入口，手动添加后重启IDE即可。

3. 为自定义模块添加类型声明文件 #

如果模块没有类型定义，IDE无法识别导出的函数。可以在模块的dist目录下创建module.d.ts文件：

export function First(): void;
export function Second(): void;
export function Third(): void;

也可以在项目根目录的typings文件夹中添加对应声明文件，确保IDE能读取到类型信息。

4. 调整IDE的JavaScript库设置 #

打开IntelliJ IDEA的设置面板：

• 进入File > Settings > Languages & Frameworks > JavaScript > Libraries
• 点击Add，选择Node.js类型，然后勾选@modules/my-custom-module所在的目录，将其标记为项目库
• 重启IDE后，即可识别模块导出内容

5. 清除IDE缓存 #

如果以上方法都无效，尝试清除IDE缓存：

• 执行File > Invalidate Caches...
• 勾选Clear file system cache and local history，点击Invalidate and Restart

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