在仅使用 react + babel cdn 的纯前端环境中，es 模块（import/export）不被支持，需改用全局变量方式共享组件；直接使用 `import` 会因 `require` 未定义而报错。

当您通过

• ❌ import Hello from './source.js' 会触发 Uncaught ReferenceError: require is not defined
• ❌ export default function Hello() 在独立 script 标签中无法被其他脚本识别

✅ 正确做法是：将组件声明为全局变量，利

用浏览器全局作用域（window）自然传递。

✅ 推荐解决方案：分文件 + 全局挂载

修改您的 HTML 结构，按执行顺序依次加载依赖脚本（注意：type="text/babel" 必须保留，且 Hello.js 必须在 index.js 之前）：

对应脚本内容如下：

// js/Hello.js
function Hello() {
  return 
Hello from CDN!
;
}
// ✅ 自动挂载到全局作用域，等价于 window.Hello = Hello

// js/index.js
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(); // ✅ 直接使用全局变量 Hello

⚠️ 注意事项

• 加载顺序至关重要：含组件定义的
• 避免命名冲突：若多个组件，建议统一前缀（如 App_Hello, App_Footer），或封装为命名空间对象：

  // js/components.js
  window.App = window.App || {};
  App.Hello = function () { return 
  Hello
  ; };
  App.Goodbye = function () { return 
  Bye
  ; };

  使用时：

• 不支持热更新/Tree-shaking：此方案适用于学习、原型或极简部署；生产环境强烈推荐使用 Vite、Webpack 或 Create React App 等构建工具启用完整模块系统。
• Babel Standalone 性能提示：它会在浏览器中实时编译 JSX，仅适合开发调试；上线前请预编译或切换为生产版 babel.min.js（已默认启用）。

✅ 总结

在无构建工具的 React CDN 场景下，模块化 = 全局变量 + 显式加载顺序。放弃 import/export，拥抱浏览器原生执行模型，即可快速绕过 require is not defined 错误，专注组件逻辑本身。这是轻量级 React 原型开发的经典实践路径。