从'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 相关，但尚不清楚如何同时导入 整个 模块和 default 导出到 React 和让这两种方法都适用于转译 JSX 等。

Answer 1

您很可能在您的tsconfig.json 中设置了"allowSyntheticDefaultImports": true,，这实际上使编译器关闭了它认为无效的默认导入。 Typescript 添加了 esModuleInterop，它基本上完成了 babel 加载模块的工作。

这允许你使用 ES6 默认导入，即使你导入的源代码没有默认导出任何东西

Typescript 在这方面是严格的（遵循规则），这就是为什么他们要求你import * as React from 'react'。或者要求您告诉它在其基本配置中允许合成默认导入。

More On That Here

Answer 2

TL;DR

确实 ES 导入语句 import default 和 import * 不是一回事，在这种情况下它们的行为相同的事实是 React 作者选择如何在 TypeScript 中发布库和兼容性层的组合（使用 @ 987654326@) 或 Babel 和你的打包工具让它们“正常工作”。根据 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，它还取决于库的类型定义是如何实际定义的。我不会深入讨论，但您可以想象由于转译器和捆绑器，特定导入在运行时工作，但 TypeScript 编译时不会出现错误的情况。

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

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