找不到React中所需的模塊

Question

我正在瀏覽React代碼庫，我注意到React的require並不像Nodejs那樣。 我不明白這里發生了什么。

例如，查看ReactClass.js上的第19行，有一個require('emptyObject') ，但是package.json中沒有列出emptyObject，也沒有說該模塊的來源。

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

我確實在npmjs上找到了“emptyObject” ，但是那里的API似乎與React中使用的API不同; React中的.isEmpty與emptyObject無關。

那么emptyObject從哪里加載，以及React require做什么呢？ 這不直觀。 完全沒有。

Answer 1

React引用的emptyObject模塊的位置是https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/emptyObject.js#L9請注意，它不遵循CommonJS模塊系統。

為了讓Facebook更容易分享和使用我們自己的JavaScript。 首先，這將允許我們發布代碼而不必過多擔心它的存在，遵循@providesModule的精神，但在更廣泛的JavaScript生態系統中工作。

來自https://github.com/facebook/fbjs#purpose

通過在許可證頭中添加@providesModule並在Node中加載帶有require模塊來定義模塊的方式稱為Haste，這是為Facebook的開源項目構建的自定義模塊系統。

事實上，除非您想了解React的內部工作原理或為Facebook的開源項目做出貢獻，否則您不需要知道這一點。 換句話說，不建議使用Haste來編寫自己的項目。

沿着相同的路線，在ReactClass.js第10行加載的invariant模塊在https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/__forks__/invariant.js#L9中聲明。

據我所知，Eclipse和WebStorm都不支持Haste，因此IDE無法提供幫助。 但是使用Haste，文件和模塊的名稱應該相同，因此您可以通過搜索文件名找到一個模塊，即Webstorm中的雙移和Eclipse中的Ctrl + Shift + r 。 但是，您詢問或invariant的emptyObject不是React的一部分，因此找到它們的來源仍然很麻煩。

否則，有一個團隊分享和組織他們從黑客React中學到的東西我偶爾會做出貢獻，並且他們通過跟隨Haste到相應的原始文件來鏈接這些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理解的內容。

此功能由fbjs提供，其中包含所有Facebook項目的共享依賴項和構建幫助程序。 這是您找到emptyObject模塊的位置 。

如果你看看React的gulp文件 ，你可以看到如何構建模塊映射，以及使用自定義Babel插件來轉換所有require調用。