如何在WebStorm中调试Yarn Workspaces+Webpack的TypeScript Monorepo

• 确保Webpack生成完整的Source Map
  应用和工作区库的Webpack配置都要设置正确的devtool选项，开发环境推荐用eval-cheap-module-source-map，确保保留库的原始源码结构，避免压缩、混淆操作。应用的Webpack配置需保证能加载依赖库的Source Map，不要忽略或覆盖这类映射文件。

• 关联JetBrains与Webpack配置
  在IDE的Settings/Preferences > Languages & Frameworks > JavaScript > Webpack中，指定项目根目录的Webpack配置文件（多配置场景选对应环境的配置）。同时在Settings > Build, Execution, Deployment > Debugger > JavaScript里，勾选Enable source maps并开启Resolve paths via tsconfig/webpack config，让IDE通过Webpack配置自动解析路径映射。

• 处理Yarn Workspaces软链接
  JetBrains默认可能无法识别Yarn创建的软链接库，可通过两种方式解决：

  • 勾选Settings > Appearance & Behavior > System Settings > Projects中的Allow accessing files from outside the project；
  • 手动添加库目录到项目结构：File > Project Structure > Modules，点击+将库目录作为模块添加，确保IDE能索引到库的源码。

• 手动配置路径映射（按需）
  若自动映射失效，在Run/Debug Configurations的JavaScript Debug配置中，找到Remote URLs local files，添加映射规则：将库在Webpack中的远程路径（通常是webpack:///./../packages/[你的库名]/src）映射到本地库的源码目录（比如/你的项目路径/packages/[你的库名]/src）。

• 让Webpack直接引用库源码
  在应用的Webpack配置中添加别名，直接指向库的源码目录，避免使用打包后的产物：

  resolve: {
    alias: {
      '@你的库名': path.resolve(__dirname, '../packages/你的库名/src')
    }
  }
  

  这样Webpack会编译库的源码，生成与应用一致的Source Map，IDE能直接关联到库的原始文件。

• 禁用Webpack缓存
  开发环境的缓存可能导致Source Map不更新，可在Webpack配置中设置cache: false，或启动dev-server时添加--no-cache参数，确保每次构建生成最新的Source Map。

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