オープンソースJSライブラリを読む方法

私たちのすべては、少なくとも一度、1つのオープンソースライブラリに貢献するためにプロットしている、それはうまく行くが、我々はソースコードを見てみると、我々は無能と愚かになる、我々はそれを私たちの頭を得ることはできません.
今日、私はあなたの図書館を読んで、それらを徹底的に理解する方法をあなたに示したいです.

If you don't know what library you must start with, I suggest you check this article by Kent C Dodds.

ニーズ

対コード(またはデバッガをそれに取り付けることができるどんなコードエディタ)

デバッガ

対コードJest拡張(我々は、働くことができません)またはノードデバッガ🤷🏻‍♂️

お気に入りのプロジェクト(私はこの時間242479152を使用します)

Sometimes we need to set our own node version on 14 because I saw the debugger has some struggles with the 15 version.

あなたはライブラリドキュメントのいくつかの背景を持っていることを確認し、ライブラリのソースコードを開くので、私たちの旅を始めましょうとコーヒー(私は実際にはしない)を飲みましょう.

上体 スタート

ほとんどの場合、私はindex.jsファイルを開きません.なぜなら、ライブラリツリーの多くのブランチがあるからです.テストを最初にチェックするので、テストをデバッグすることができ、ライブラリの動作方法を確認できます.

設定

JOTAIはJestテストを行うので、 拡張モジュールでテストをデバッグできます.設定ファイルを作成する必要があります.

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "name": "vscode-jest-tests",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/jest/bin/jest",
      "args": ["--runInBand", "${file}"],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true
    }
  ]
}

私はこの設定のほとんどを使用しますが、それは時々あなたのプロジェクトに依存します.例えば、ReactJSソースコードでは、JEST自体の代わりにjest-cli.jsをプログラムとしてリンクしなければなりません.

冗談 ブレークポイント

たとえば、私はuseAtomがどのように働くかを見るのが大好きです.したがって、私はちょうど関連したテストに行って、私がもっと知りたいラインにブレークポイントを設定する必要があります.その後、我々はvscode-jest-tests設定したファイルを実行し、ブレークポイントを設定する行に停止します⏹️ です.

ここでデバッガバー(右コーナー)で再生し、コード実行フローを見る必要があります.
私はこの記事は、より多くのオープンソースを行うことを奨励し、あなたの恐怖を(実際にはそれらのすべてを殺す)をお勧めします.それはパーティーに再び時間ので、この小さな記事を共有することを忘れないでください、それは私の最初の2021条3血まみれの月間後に、私はもっと投稿しようとしているので、私はあなたの反応でそうするのを助ける.そこに排他的な記事のを見て忘れないでください.