请教什么是前端 npm 库 代码阅读的最佳实践？

[bnm965321]

最近写前端代码发现一些情况和写 python 的时候不一样。

同样是 JetBrains 旗下的 IDE：

1. Pycharm 是可以直接 inspect code，可以 「 command + 左键」 看到源代码。
2. Webstorm 同样的操作只能看到 typescript 的类型定义，然后你在同一个文件夹查找 js 文件，源代码都是被 webpack/babel 改造之后的样子，没有办法阅读。

搜索了网上没有这方面的讨论，有一个阅读代码的方法是直接去 GitHub 阅读，通过一些浏览器插件来辅助。但是由于 npm 颗粒度太细，感觉体验也不好：

比如我读 antd/form 的源代码，发现它是对 rc-field-form 的封装。意味着我又要去手动搜索打开 rc-field-form 的网址

[wednesdayco]

最近后端老哥写前端的帖子有点多啊。。

[wednesdayco]

vscode 试试？当然还是得看 npm 的包里是否包含“源码”，而不是编译版本。

[bnm965321]

@wednesdayco vscode 试了也是一样

[magicdawn]

能找到源码不错了, npm 包可以不必有 repo 的
正确姿势, 看你安装好的 node_modules 里的源码

[noe132]

npm 的包一般都是编译过的版本，为了适应各种运行环境，以及解决一些打包需求，代码通常都会编译到一个特定的 target 。并且为了降低包体积，你安装时很有可能没有源码。

想看编译后的代码直接到 node_modules 里找对应的包。想看未编译的版本就得到源代码仓库。不像 python 大多都是直接源代码打包。

被编译后的代码一般没有阅读价值，而 typescript 的类型比 python 的类型强很多，所以大部分包看类型就足够了

npm 包一般依赖比较深，你这种看代码的方式不太合适。一般来说了解接口就足够了，包应该当作黑盒处理

[bnm965321]

@noe132 看到 Typescript 类型签名大多数时候够了。但是有时候需要看一下源代码才能理解怎么用，比如 antd/Form.List 这个 render props 返回的几个参数搞不懂啥意思，官方文档也没有说明

[Trim21]

感觉是因为 python 作者会额外写 pyi 的人少，所以你还能转跳的源码…

[bnm965321]

@Trim21 pyi 是加入类型声明吧，有类型声明也可以额外跳转到 implementation 的。

不过也不是总是可以，动态语言里面转来转去，IDE 有时候会分不清变量的类型。但是只要知道是哪个类型，找源码还是很简单的。

[J0G57faC6uPo75W0]

我的工具是 ：vscode + 插件 Search node_modules, 还挺方便的。

[bnm965321]

@Tomotoes 主要的问题是 node_modules 里面的代码不是 for human readable 的，我看着都怕。。

[ljpCN]

恭喜楼主发现了一个 node_modules 的无数个缺点中的一个，我觉得业界的确需要一个新的或者额外的机制来支持楼主需要的功能。

[J0G57faC6uPo75W0]

@bnm965321 你是不是读的 类似 dist 文件夹 编译后的代码啊。node_modules 有每个包的源码的。

[bnm965321]

@Tomotoes 比如 node_modules/antd 下面有三个目录：es/lib/dist 。这三个目录我看了都是编译后的代码

[bnm965321]

@ljpCN 不是我一定要有这个功能，我是想看一下业界有没有什么更好的办法，没有办法我就去 GitHub 看代码咯

[wednesdayco]

@bnm965321 有的没 types 的可以看看三方 types 库里有没有 @types/xxx