react框架，看到的总是使用es5，通过webpack编译构建。react官方，直到现在的v18.1.0版本中，只有cjs和umd版本，都没有esm（es6）版本，看起来是对es6的不认可？

但是，大家写react组件都是按es6语法在写，最后搞了一大堆webpack/babel来转成es5运行，啰里啰嗦的。为何不直接使用es6原生模式直接运行呢？我比较喜欢“浏览器原生开发”，不想如俄罗套娃一样，一层层套下去，搞了很多半生不熟的工具（react-app在node_modules下搞出的921个组件，是很唬人的），最后出问题了还不知道哪里找。

相比较而言，vue 3.3.4版本就有cjs和esm版本，使用vue的框架就可以使用es6。

那是否react框架真的没有办法使用es6运行呢？那倒不是，只是麻烦些，方法如下。

（1）react和react-dom封装成es6

有些第三方组件，引用react是隐式从window.React来，有的是显示import。

import React from 'react';class YJFoilTopLeft extends React.Component {

不太可能去要求人家全部改掉。只能把react封装成一个esm版本的组件：

react@foil.mjs/*** react v18.1.0，官方没有提供es6版本，这里把es5版本包装成es6版本。*/
let React = window.yjRequire('react@raw');
let { Children, Component, Fragment, Profiler, PureComponent, StrictMode,Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement,createContext, createElement, createFactory, createRef, forwardRef,isValidElement, lazy, memo, startTransition, unstable_act, useCallback,useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle,useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState,useSyncExternalStore, useTransition, version } = React;
export {Children, Component, Fragment, Profiler, PureComponent, StrictMode,Suspense, __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, cloneElement,createContext, createElement, createFactory, createRef, forwardRef,isValidElement, lazy, memo, startTransition, unstable_act, useCallback,useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle,useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState,useSyncExternalStore, useTransition, version
}
export default React;

react-dom也类似：

react-dom@foil.mjs/*** react-dom v18.1.0，官方没有提供es6版本，这里把es5版本包装成es6版本。*/
let ReactDOM = window.yjRequire('react-dom@raw');
let { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, createPortal, createRoot,findDOMNode, flushSync, hydrate, hydrateRoot, render, unmountComponentAtNode,unstable_batchedUpdates, unstable_renderSubtreeIntoContainer, version } = ReactDOM;
export {__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, createPortal, createRoot,findDOMNode, flushSync, hydrate, hydrateRoot, render, unmountComponentAtNode,unstable_batchedUpdates, unstable_renderSubtreeIntoContainer, version
}
export default ReactDOM;

浏览器中的importMap这样写：

{'react@raw':"/react/umd/react.development.js",'react-dom@raw':"/react-dom/umd/react-dom.development.js",'react':'/spa/react/root/src/wrapper/react@foil.mjs','react-dom':'/spa/react/root/src/wrapper/react-dom@foil.mjs'
}

（2）遇到其它没有esm版本的第三方组件，如法炮制。

如：devextreme-react用到的prop-types，也是没有esm版本：

prop-types@foil.mjs/*** prop-types v15.8.1，官方没有提供es6版本，这里把es5版本包装成es6版本。*/
let PropTypes = window.yjRequire('prop-types@raw');
let { array, bigint, bool, func, number, object, string, symbol,any, arrayOf, element, elementType, instanceOf, node, objectOf,oneOf, oneOfType, shape, exact, checkPropTypes, resetWarningCache} = PropTypes;
export {array, bigint, bool, func, number, object, string, symbol,any, arrayOf, element, elementType, instanceOf, node, objectOf,oneOf, oneOfType, shape, exact, checkPropTypes, resetWarningCache, PropTypes
}
export default PropTypes;

在浏览器importMap中加上映射：

{"prop-types@raw":"/devextreme-react/node_modules/prop-types/prop-types.js","prop-types":"/spa/react/root/src/wrapper/prop-types@foil.mjs",
}

rc-easyui 1.2.9版本也没有esm版本，你自己封装试试吧。