在 React 中找不到所需的模块

Posted 2023-02-22

【中文标题】在 React 中找不到所需的模块

【英文标题】：Can't find modules required in React

【发布时间】：2017-03-14 04:57:01

【问题描述】：

我正在浏览 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

我确实找到了"emptyObject" on npmjs，但那里的 API 似乎与 React 中使用的不同； React 中 grepped 的 .isEmpty 与 emptyObject 无关。

那么 emptyObject 是从哪里加载的，React 的 require 是如何做的呢？这不直观。完全没有。

【参考方案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中的double shift和Ctrl+Shift +r 在 Eclipse 中。但是，您询问的 emptyObject 或 invariant 不是 React 的一部分，因此查找它们的来源仍然很麻烦。

否则，有一个团队会分享和组织他们从黑客 React 中学到的东西，我偶尔会做出贡献，他们通过关注 Haste 将这些 requires 链接到相应的原始文件，例如https://annot.io/github.com/facebook/react/blob/cc3dc21/src/isomorphic/classic/class/ReactClass.js?l=19你可能想看看。

【讨论】：

急速详情见facebook.github.io/react/contributing/…

我不使用任何这些 IDE，但我想在 facebook/fbjs 目录中使用finding 可以吗？ annot.io 链接很有趣。谢谢。

在没有 IDE 的情况下处理像 JavaScript 这样的动态语言可能会很烦人，尤其是在像这样的 facebookisms 的项目中。那你用什么？

我是最近但虔诚的 emacs 追随者。它似乎与 JavaScript 配合得很好——甚至是 React，尽管进一步的经验可能会有所不同

【参考方案2】：

我注意到 React 的 require 与 Nodejs 中的行为不太一样。

没错。 Facebook 有自己的模块加载器。所有模块都有唯一标识符，由每个模块中的@providesModule 指令提供。这允许您使用标识符来加载模块，而不是文件路径。

当然，这在基于 Node.js 的环境中是行不通的。因此，当 React 或任何其他 Facebook 项目发布到 npm 时，所有 require 调用都会自动重写为 Node 可以理解的内容。

此功能由 fbjs 提供，其中包含所有 Facebook 项目的共享依赖项和构建助手。 This is where you find the emptyObject module.

如果您查看React's gulp file，您会看到模块映射是如何构建的，并且自定义 Babel 插件用于转换所有 require 调用。

【讨论】：

所以 gulp 文件就是 require 的工作方式。谢谢。不过，我选择@donghwan-kim 的答案是因为提到了 Haste 和各种查找目标模块的方法。