在仅使用 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(⚠️ 注意事项
- 加载顺序至关重要：含组件定义的
-
避免命名冲突：若多个组件，建议统一前缀（如 App_Hello, App_Footer），或封装为命名空间对象：
// js/components.js window.App = window.App || {}; App.Hello = function () { returnHello
; }; App.Goodbye = function () { returnBye
; };使用时：
- 不支持热更新/Tree-shaking：此方案适用于学习、原型或极简部署；生产环境强烈推荐使用 Vite、Webpack 或 Create React App 等构建工具启用完整模块系统。
- Babel Standalone 性能提示：它会在浏览器中实时编译 JSX，仅适合开发调试；上线前请预编译或切换为生产版 babel.min.js（已默认启用）。
✅ 总结
在无构建工具的 React CDN 场景下，模块化 = 全局变量 + 显式加载顺序。放弃 import/export，拥抱浏览器原生执行模型，即可快速绕过 require is not defined 错误，专注组件逻辑本身。这是轻量级 React 原型开发的经典实践路径。
