在纯 cdn + babel standalone 的 react 开发环境中，es 模块（import/export）不被支持，需通过全局变量共享组件；本文详解替代方案、实现步骤及关键注意事项。
当使用 React 官方 UMD 版本（如 react.development.js）配合 Babel Standalone（@babel/standalone）时，浏览器环境不支持 CommonJS 的 require() 或 ES Module 的 import/export 语法——因为这些模块系统依赖 Node.js 运行时或打包工具（如 Webpack/Vite）进行解析。你遇到的 Uncaught ReferenceError: require is not defined 正是这一限制的直接体现。
✅ 正确解法：利用全局作用域共享组件
Babel Standalone 在 type="text/babel" 脚本中会自动执行并提升顶层函数声明到全局（类似传统 <script> 行为），因此可将组件定义为全局变量，再在主入口脚本中直接引用：
1. 修改 HTML 结构（按加载顺序引入多个 text/babel 脚本）
确保依赖脚本（如 Hello.js）在使用脚本（如 index.js）之前加载：
<body> <div id="root"></div> <!-- 先加载组件定义 --> <script type="text/babel" src="js/Hello.js"></script> <!-- 再加载主渲染逻辑 --> <script type="text/babel" src="js/index.js"></script> </body>
2. 重写 Hello.js（移除 export，直接声明函数）
// js/Hello.js
function Hello() {
return <h1>Hello from CDN!</h1>;
}
// ✅ 自动挂载到 window.Hello（全局可访问）3. 更新 index.js（直接使用全局组件名）
// js/index.js
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />); // ✅ Hello 已在全局作用域中定义⚠️ 注意事项：
- 加载顺序至关重要：Hello.js 必须在 index.js 之前引入，否则 Hello 尚未定义；
- 避免命名冲突：全局变量易污染作用域，建议使用语义化且唯一的名称（如 MyApp_Hello）；
- 无模块隔离：无法实现 tree-shaking、循环依赖检测等现代模块特性；
- 仅适用于学习/原型验证：生产环境务必迁移到 Vite、Create React App 等支持模块系统的构建工具。
? 扩展建议：若需模拟模块行为，可手动封装简易模块注册器（非推荐，仅作理解）：
// js/modules.js（先加载）
window.MODULES = {};
// js/Hello.js
window.MODULES.Hello = function() { return <h1>Hello</h1>; };
// js/index.js
const Hello = window.MODULES.Hello;
root.render(<Hello />);总之，在 CDN + Babel 的轻量场景下，请放弃 import/export 思维，拥抱全局变量协作模式——简洁、有效，且完全兼容当前运行时约束。
