React 实际上是从哪里导入的？

Question

大多数 React 文件的顶部有：

import React from 'react'

然而 react 实际上并不是一个文件。那么它在哪里以及如何从无到有地导入？

Answer 1

React 作为 npm 包安装，因此可以在您的 node_modules 文件夹中找到。这就是它的进口来源。

Answer 2

React 在 node_modules 目录中作为依赖项可用。

React 也必须在包含 JSX 的文件的范围内，以使像 Babel 这样的转译器知道如何处理该语法。

Answer 3

当您从 react 导入时，如果没有指定文件，它首先会像其他模块查找 index.js 一样查找 node_modules/react/index.js。你可能还会问为什么要找node_modules？答案是您没有为例如指定相对或绝对文件路径。 ./components/MyComponent。当你不指定具体路径时，它会寻找node_modules目录。

index.js 导出如下：

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react.production.min.js');
} else {
  module.exports = require('./cjs/react.development.js');
}

那么，让我们继续 development 环境。现在，当您查看文件 node_modules/react/csj/react.development.js 时，您会发现文件末尾有几个 exports 语句。

所以，您只是导入 React 意味着您正在导入所有这些。因此，您可以使用 React.Component、React.Children 等

您不必一定要命名 React，但这是标准的。所以，即使你这样做：

import ReactApplication from 'react'

您可以像 ReactApplication.Component 一样访问所有这些。希望，这可以解决问题。

更多详情：

当您指定./时，它将查找当前目录。
当您指定/时，它会寻找根目录。
当您不指定时，它将首先查找您项目中的目录，如果没有找到，它将查找 node_modules 目录。

您可能有兴趣查看的其他 post：

React 实际上是从哪里导入的？

Where is React actually being imported from?

reactjs

webpack

webpack-dev-server