如何在WebStorm中配置npm包引用直接跳转至对应源代码？

大部分发布到npm的Angular第三方库，发布前都会经过编译打包流程，最终上传到npm的产物仅包含编译后的JavaScript代码、.d.ts类型定义文件、以及样式文件，不会包含原始的TypeScript源码、HTML模板等开发态代码。
你在node_modules里能找到的编译后JS代码一般存放在库目录下的esm2020、fesm2020、bundles这类命名的文件夹中，但这些都是转译后的产物，和原始开发源码有较大差异，无法直接用于调试和查看逻辑。
只有少数库的作者会特意把源码目录一起打包上传到npm，这种情况你可以直接在对应库的node_modules目录下找到src文件夹查看原始代码。

可以，分两种场景配置：

• 若对应npm包本身已附带原始源码：打开WebStorm设置，依次进入Languages & Frameworks > JavaScript > Libraries，找到对应库的配置项，将库内的源码目录添加到库的源码引用路径中，保存后即可实现点击跳转至源码。
• 若对应npm包未附带原始源码：你需要先将对应版本的库源码下载到本地，然后可通过两种方式配置：
  • 使用npm link命令将本地编译后的库链接到你项目的node_modules目录中，同时在WebStorm中将本地库的源码目录添加到当前项目的源码索引范围
  • 若仅需调试使用，可以修改项目的angular.json配置，在sourceMap配置项中添加对应库的映射规则，关联到你本地存放的对应版本源码即可

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