Reactで必要なモジュールが見つからない

Question

Reactのコードベースを調べていましたが、ReactのrequireがNodejのように動作しないことに気付きました。私はここで何が起こっているのか分からない。

たとえば、ReactClass.jsの行19を見ると、require('emptyObject')がありますが、emptyObjectはpackage.jsonにはリストされていません。

https://github.com/facebook/react/blob/master/src/isomorphic/classic/class/ReactClass.js#L19

私は"emptyObject" on npmjsを見つけましたが、APIが反応で使用されるものとは異なるあるようです。 Reactにgreppedされた.isEmptyは、emptyObjectには関係しません。

したがって、どこから空のオブジェクトがロードされているのですか？Reactのrequireはどのように処理していますか？これは直感的ではありません。まったく。

Answer 1

Reactが参照するemptyObjectモジュールの場所はhttps://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/emptyObject.js#L9です.CommunJSモジュールシステムには従いません。

Facebookが自分のJavaScriptを共有して使いやすくするためです。主にこれは、私たちが@providesModuleの精神を守って広範なJavaScriptエコシステムで働いていることを心配せずにコードを発送することを可能にします。ライセンスヘッダに@providesModuleを追加し、ノード内requireでこれらのモジュールをロードすることによって、モジュールを定義する方法は速攻、Facebookのオープンソースプロジェクトのために構築されたカスタマイズされたモジュールシステムと呼ばれるhttps://github.com/facebook/fbjs#purpose

から

。

実際には、Reactの内部の仕組みを理解したり、Facebookのオープンソースプロジェクトに貢献したりしない限り、そのことを知る必要はありません。言い換えれば、自分のプロジェクトを書くためにHastを使うことは勧められません。同じ線に沿って

、ReactClass.jsのライン10にロードされているinvariantモジュールは、私の知る限りではhttps://github.com/facebook/fbjs/blob/master/packages/fbjs/src/__forks__/invariant.js#L9

で宣言され、両方のIDEを助けることができないので、EclipseとWebStormは速攻をサポートしていません。しかし、速攻で、ファイルおよびモジュールの名前は同じでなければなりませんので、あなたは、ファイル名を検索してモジュール、すなわちダブルWebstormのシフトとEclipseではCtrl +Shiftキー + Rを見つけることができます。しかし、あなたが聞いたemptyObjectについては、invariantはReactの一部ではないので、依然としてその起源を見つけるのは面倒です。

それ以外の場合は、ハッキングのリアクションから学んだことを時々共有し、整理してチームに分けて、requireを対応する起点ファイルに関連付けてリンクしています。 https://annot.io/github.com/facebook/react/blob/cc3dc21/src/isomorphic/classic/class/ReactClass.js?l=19あなたはそれを見たいかもしれません。

Answer 2

ReactのrequireがNodejsのように動作していないことに気付きました。

右。 Facebookには独自のモジュールローダーがあります。すべてのモジュールには、各モジュールの@providesModuleディレクティブによって提供される一意の識別子があります。これにより、識別子を使用してファイルパスではなくモジュールをロードすることができます。

もちろんNode.jsベースの環境では動作しません。したがって、Reactやその他のFacebookプロジェクトがnpmに公開されると、requireのすべての呼び出しが、Nodeが理解できるものに自動的に書き換えられます。

この機能は、すべてのFacebookプロジェクトの共有依存関係とビルドヘルパーを含むfbjsによって提供されています。 This is where you find the emptyObject module。

React's gulp fileを見ると、モジュールマップがどのように構築され、カスタムBabelプラグインがすべてのrequireコールを変換するのかが分かります。