如何让CDN加载的Babel支持ES6模块（无构建React环境）

核心解决方案 #

要阻止Babel把import转成浏览器不支持的require，同时保留ES模块能力，需调整Babel版本和配置，具体步骤如下：

1. 升级Babel Standalone到7.x版本
   v6版本对ES模块支持不完善，替换为7.x版本才能灵活控制模块转换行为：

   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
   

2. 配置Babel保留ES模块语法
   修改加载main.js的script标签，通过data-presets指定React预设，并强制关闭模块转换：

   <script 
       defer 
       type="text/babel" 
       data-type="module"
       data-presets='["react", ["@babel/preset-env", { "modules": false }]]'
       src="main.js"
   ></script>
   - `data-type="module"`告诉浏览器按ES模块规则加载脚本
   - `{"modules": false}`让Babel保留原生的`import/export`语法，不转为`require`
   
   

3. 修正模块导入路径
   浏览器ES模块要求导入路径必须带完整文件后缀，所以main.js里的导入要补充.js：

   import { Drawing } from "./drawing.js";
   

完整HTML示例 #

<head>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
    <script 
        defer 
        type="text/babel" 
        data-type="module"
        data-presets='["react", ["@babel/preset-env", { "modules": false }]]'
        src="main.js"
    ></script>
</head>
<body>
    <div id="main"></div>
</body>

子模块（drawing.js）示例 #

如果子模块包含JSX，直接按ES模块编写即可，无需额外配置（会被主模块的Babel处理）：

export const Drawing = () => {
    return <div>Drawing Component</div>;
};

说明 #

• 此配置仅适用于快速原型开发，不建议用于生产环境
• 保留全局加载的React/ReactDOM UMD版本，无需修改模块内的React/ReactDOM全局变量引用

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