如何获取 React 和 ReactDOM 的 ES6 模块？答案

【问题标题】：How to obtain ES6 module of React and ReactDOM?如何获取 React 和 ReactDOM 的 ES6 模块？
【发布时间】：2019-01-16 20:10:06
【问题描述】：

我不打算使用 WebPack 捆绑的 js 文件，而是以 ES6 方式原生地 import React ES6 模块。

这是 JSX、TSX 或 ES6 中的典型代码。

import * as React from 'react';
import * as ReactDOM from 'react-dom';

所以，我调查了./node_modules/react 和react-dom。

有 2 个目录名为 cjs 和 umd，每个目录都包含 react.development.js 和 react.production.min.js。

很公平，所以调查文件，

cjs 用于 CommonJS module.exports /require 模块。

umd 是通用模块定义，看起来可以通过 Babel 插件transform-es2015-modules-umd 使用。

在这两个文件中，它们都不是 ES6 模块，对我来说，找不到模块文件是非常尴尬的情况：

import * as React from 'react';
import * as ReactDOM from 'react-dom';

如何获取React和ReactDOM的ES6模块？？

有没有什么方法可以使用 Babel 生态甚至 TypeScript 中的工具生成 ES6 模块？

谢谢。

【问题讨论】：

我认为您可以使用您喜欢的任何模块定义的源代码自行构建库。
您是否尝试将react.production.min.js 托管在与导入它的模块相同的网络服务器目录树中？并使用正确的路径：import React from '../path/to/react/react.production.min.js';
@Shilly 实际上，没有。由于我不觉得无所事事，所以我只是用export搜索了源文本，结果是无。无论如何，谢谢大家。

标签： node.js reactjs typescript webpack ecmascript-6

【解决方案1】：

2021-04-11 更新：

https://github.com/facebook/react/issues/11503#issuecomment-662647468 是 Dan Abramov 在 2020 年 7 月 22 日的更新，其中提到了新的https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html。使用新的转换，导入 React 的默认导出的理由大大减少。

实际分发的第一方 React ESM 可能会在 React 17 下降之后发生。

除了清理未使用的导入之外，这还将帮助您为将来支持 ES 模块且没有默认导出的 React 主要版本（不是 React 17）做好准备。

旧答案

2017 年 11 月 9 日Dan Abramov said：

目前我们只发布所有包的 CommonJS 版本。但是，我们可能希望在未来将它们作为 ESM 发布 (#10021)。

我们不能很容易地做到这一点，因为我们还没有真正决定每个包的顶级 ES 导出是什么样的。例如，react 是否有一堆命名导出，但也有一个名为 React 的默认导出？我们是否应该鼓励人们输入 * 以更好地摇树？当前导出类的 react-test-renderer/shallow 怎么样（如果它转换为默认导出，Node 会开始失败）？

The issue referenced above 是您从 2017 年 6 月 21 日开始提出的要求。

【讨论】：

【解决方案2】：

在我们等待正式的 React ESM 时，这是一个相当简单但很老套的解决方案。使用 React 和 ReactDOM 的 npm 包附带的 umd 模块。按以下方式包装 umd 模块：

反应

let g = {}

let w = (function(){
// Standard umd module code goes here
}).bind(g)

w()

export default g.React

ReactDOM

import React from './react'

let g = {React: React}

let w = (function(){
// Standard umd module code goes here
}).bind(g)

w()

export default g.ReactDOM

您可能需要修改 ./react 导入路径以使用您的服务器所期望的。

【讨论】：