Question

我不打算将WebPack捆绑的js文件用于import以ES6本机方式响应的ES6模块。

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

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

因此，我调查了./node_modules/react和react-dom。

有两个名为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模块的方法？

谢谢。

Answer 1

2017年11月9日Dan Abramov said：

当前，我们仅提供所有软件包的CommonJS版本。但是，我们将来可能希望将它们作为ESM发货（＃10021）。

我们不能轻易做到这一点，因为我们还没有真正确定每个软件包中顶级ES出口的外观。例如，react是否有一堆命名的导出，还有一个名为React的默认导出？我们是否应该鼓励人们进口*以便更好地摇树？当前导出一个类的react-test-renderer / shallow怎么办（因此如果将Node转换为默认导出，它将在Node中开始失败）？

The issue referenced above是您自2017年6月21日以来的要求的请求。

Answer 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导入路径以符合服务器的期望。

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

2 个答案: