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

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

  •  1
     
  •   bnm965321 · 8 天前 · 1055 次点击

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

    同样是 JetBrains 旗下的 IDE:

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

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

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

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

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

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

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

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