React 引用问题困扰？解决 UMD 全局与模块矛盾

React 引用问题：UMD 全局与模块的矛盾

引言

升级 React App 至 4.0 并转换为 TypeScript 后，开发者经常遇到一个困扰性的错误，提示 "React" 指向 UMD 全局，而文件是模块，建议添加导入。深入了解 UMD 全局与 ESM 模块之间的差异，将帮助你理解并解决此问题。

UMD 全局与 ESM 模块

JavaScript 中有两个流行的模块系统：UMD（通用模块定义）和 ESM（ECMAScript 模块）。

UMD 全局： UMD 是一个包装器函数，可让模块作为全局变量使用或在模块加载器中使用。

ESM 模块： ESM 是 JavaScript 的原生模块系统，使用 import 和 export 。

错误原因

在 React App 4.0 中，React 默认配置为 UMD 全局，可以通过全局变量 "React" 访问。然而，TypeScript 文件使用 ESM 模块系统，这意味着在没有导入 React 的情况下使用 "React" 会产生错误。

解决方法

有两种方法可以解决此问题：

1. 导入 React

最直接的方法是导入 React。在 TS 文件顶部添加以下行：

import React from "react";

2. 使用 declare global

另一种方法是使用 declare global 声明，告知 TypeScript 你正在使用 React UMD 全局。在 TS 文件顶部添加以下行：

declare global {
  interface Window {
    React: any;
  }
}

结论

通过了解 UMD 全局与 ESM 模块之间的区别，你可以轻松理解和解决 "React" 引用问题。根据你的需求，选择导入 React 或使用 declare global 声明。这样做将确保你在 TypeScript 文件中正确使用 React，避免错误。

常见问题解答

1. 为什么 "React" 引用问题在升级到 React App 4.0 后才出现？
   答：React App 4.0 将 React 配置为 UMD 全局，而以前版本使用的是 ESM。

2. 使用 declare global 声明会有什么负面影响？
   答：在 TSX 文件中使用 declare global 可能会导致名称空间污染。

3. 我应该导入 React 还是使用 declare global 声明？
   答：导入 React 是首选方法，因为这提供了一个明确的依赖声明。

4. 是否可以将 React 配置为 ESM 模块？
   答：可以，但你必须进行一些额外的配置。

5. 错误消息中的 "考虑添加一个导入" 是什么意思？
   答：这意味着你需要将 React 模块导入到你的 TS 文件中。