使用React CDN时，能否为单个JS脚本同时设置module与text/babel类型？

你没法直接把type="module"和type="text/babel"合并成一个属性值，但可以借助@babel/standalone同时满足JSX解析与ES模块的需求，具体实现步骤如下：

1. 引入必要CDN资源 #

先在HTML中按顺序引入React、ReactDOM以及@babel/standalone的CDN文件：

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2. 配置模块脚本并启用JSX解析 #

将你的脚本标签设置为type="module"，同时通过data-type="module"和data-presets属性告知Babel要处理ES模块语法并解析JSX：

<script type="module" data-type="module" data-presets="react" src="./main.js"></script>

3. 编写模块文件示例 #

主模块文件（main.js） #

可以直接导入其他组件文件，同时编写JSX代码：

import { MyComponent } from './components/MyComponent.js';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyComponent />);

子组件文件（components/MyComponent.js） #

通过ES模块的export语法对外暴露组件：

export function MyComponent() {
  return (
    <div className="responsive-section">
      <h2>响应式区域</h2>
      <p>基于ES模块+JSX实现的可复用组件</p>
    </div>
  );
}

关键注意事项 #

• ES模块要求脚本文件路径必须是完整相对路径（比如要加./前缀），不能省略
• @babel/standalone会通过data-presets="react"自动解析JSX，同时浏览器会以ES模块规则处理import/export语法
• 若需额外Babel插件支持，可通过data-plugins属性添加，比如data-plugins="transform-arrow-functions"

内容的提问来源于stack exchange，提问作者Hamza Mehboob