V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
bnm965321
V2EX  ›  JavaScript

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

  •  1
     
  •   bnm965321 · 2020-03-26 10:37:24 +08:00 · 3139 次点击
    这是一个创建于 1687 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    同样是 JetBrains 旗下的 IDE:

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

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

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

    15 条回复    2020-03-26 17:01:39 +08:00
    wednesdayco
        1
    wednesdayco  
       2020-03-26 10:46:50 +08:00   ❤️ 1
    最近后端老哥写前端的帖子有点多啊。。
    wednesdayco
        2
    wednesdayco  
       2020-03-26 11:14:01 +08:00
    vscode 试试?当然还是得看 npm 的包里是否包含“源码”,而不是编译版本。
    bnm965321
        3
    bnm965321  
    OP
       2020-03-26 11:42:22 +08:00
    @wednesdayco vscode 试了也是一样
    magicdawn
        4
    magicdawn  
       2020-03-26 12:10:17 +08:00
    能找到源码不错了, npm 包可以不必有 repo 的
    正确姿势, 看你安装好的 node_modules 里的源码
    noe132
        5
    noe132  
       2020-03-26 12:19:02 +08:00
    npm 的包一般都是编译过的版本,为了适应各种运行环境,以及解决一些打包需求,代码通常都会编译到一个特定的 target 。并且为了降低包体积,你安装时很有可能没有源码。

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

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

    npm 包一般依赖比较深,你这种看代码的方式不太合适。一般来说了解接口就足够了,包应该当作黑盒处理
    bnm965321
        6
    bnm965321  
    OP
       2020-03-26 13:12:12 +08:00
    @noe132 看到 Typescript 类型签名大多数时候够了。但是有时候需要看一下源代码才能理解怎么用,比如 antd/Form.List 这个 render props 返回的几个参数搞不懂啥意思,官方文档也没有说明
    Trim21
        7
    Trim21  
       2020-03-26 13:15:05 +08:00 via Android
    感觉是因为 python 作者会额外写 pyi 的人少,所以你还能转跳的源码…
    bnm965321
        8
    bnm965321  
    OP
       2020-03-26 15:12:21 +08:00
    @Trim21 pyi 是加入类型声明吧,有类型声明也可以额外跳转到 implementation 的。

    不过也不是总是可以,动态语言里面转来转去,IDE 有时候会分不清变量的类型。但是只要知道是哪个类型,找源码还是很简单的。
    Tomotoes
        9
    Tomotoes  
       2020-03-26 16:06:13 +08:00
    我的工具是 :vscode + 插件 Search node_modules, 还挺方便的。
    bnm965321
        10
    bnm965321  
    OP
       2020-03-26 16:11:29 +08:00
    @Tomotoes 主要的问题是 node_modules 里面的代码不是 for human readable 的,我看着都怕。。
    ljpCN
        11
    ljpCN  
       2020-03-26 16:16:15 +08:00 via Android
    恭喜楼主发现了一个 node_modules 的无数个缺点中的一个,我觉得业界的确需要一个新的或者额外的机制来支持楼主需要的功能。
    Tomotoes
        12
    Tomotoes  
       2020-03-26 16:22:44 +08:00
    @bnm965321 你是不是读的 类似 dist 文件夹 编译后的代码啊。node_modules 有每个包的源码的。
    bnm965321
        13
    bnm965321  
    OP
       2020-03-26 16:52:33 +08:00
    @Tomotoes 比如 node_modules/antd 下面有三个目录:es/lib/dist 。这三个目录我看了都是编译后的代码
    bnm965321
        14
    bnm965321  
    OP
       2020-03-26 16:57:45 +08:00
    @ljpCN 不是我一定要有这个功能,我是想看一下业界有没有什么更好的办法,没有办法我就去 GitHub 看代码咯
    wednesdayco
        15
    wednesdayco  
       2020-03-26 17:01:39 +08:00
    @bnm965321 有的没 types 的可以看看三方 types 库里有没有 @types/xxx
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1048 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 19:43 · PVG 03:43 · LAX 11:43 · JFK 14:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.