javascript - 从 'react' 导入 * 作为 React； vs 从 'react' 导入 React；

Question

我注意到 React 可以这样导入:

import * as React from 'react';

...或者像这样:

import React from 'react';

---

第一个导入 react 模块中的所有内容(参见:Import an entire module's contents)

第二个仅导入 default 模块导出(参见:Importing defaults)

---

这两种方法似乎不同，而且根本不兼容。

为什么它们都有效？

---

请引用源代码并解释机制...我有兴趣了解它是如何工作的。

---

更新

这不是 What is the difference between import * as react from 'react' vs import react from 'react' 的副本

这个问题用一般的 ES6 模块信息回答了。

我问的是使 react 模块像这样工作的机制。这似乎与“hacky”导出机制有关in the source here但目前尚不清楚如何将 entire 模块和 default 导出到 React 中，并让这两种方法都与转译 JSX 一起工作等

Answer 1

长话短说

事实上 ES import 语句 import default 和 import * 不是一回事，在这种情况下它们表现相同的事实是 React 作者如何选择的组合在 TypeScript 中发布库和兼容层(使用 esModuleInterop)或 Babel 和你的 bundler ，使它们“正常工作”。根据 ES6 规范，它可能不应该工作，但今天我们仍然工作在一个 JS 模块一团糟的时代，所以像 Babel、TypeScript、Webpack 等工具试图规范行为。

更多详情:

React 不是 ES6 库。如果你看the source code你在 index.js 中看到这个:

const React = require('./src/React');

// TODO: decide on the top-level export form.
// This is hacky but makes it work with both Rollup and Jest.
module.exports = React.default || React;

(请注意评论，即使在 React 源代码中，他们也与 ES6 默认导出兼容性作斗争。)

module.exports = 语法是 CommonJS (NodeJS)。浏览器不会理解这一点。这就是我们使用 Webpack、Rollup 或 Parcel 等打包工具的原因。他们了解各种模块语法并生成应在浏览器中运行的包。

但即使 React 不是 ES 库，TypeScript 和 Babel 都允许您导入它，就像它是一样(使用 import 语法，而不是 require()，等)，但 CJS 和 ES 之间存在差异，必须解决。其中之一是 export = 可以 为您提供 ES 没有符合规范的导入方式的东西，例如作为模块的函数或类。为了解决这些不兼容问题，Babel 暂时允许您导入 CJS 模块，就好像它们默认导出某些东西一样，或导入为命名空间。 TypeScript 有一段时间没有这样做，但最近将其添加为 esModuleInterop 下的一个选项。所以现在 Babel 和 TypeScript 都可以非常一致地允许使用默认或命名空间 ES 导入导入 CJS 模块。

对于 TypeScript，它还取决于库的类型定义的实际定义方式。我不会深入讨论这个问题，但您可以想象这样的情况:由于转译器和 bundler ，特定导入在运行时可以，但 TypeScript 无法编译而不会出现错误。

另一件值得一提的事情是，如果您查看 React 的构建代码，就会发现一个 UMD module。版本以及 CJS 版本。 UMD 版本包含一些粗糙的运行时代码，试图使其在任何模块环境(包括浏览器)中工作。它主要用于如果你只想在运行时包含 React(即你不使用 bundler )。 Example .

令人困惑？是的，我想是的。 :)