在仅使用 react + babel cdn 的纯前端环境中，es 模块（import/export）不被支持，需改用全局变量方式共享组件；直接使用 `import` 会因 `require` 未定义而报错。
当您通过 <script type="text/babel" src="..."> 引入 React 应用时，底层依赖的是 Babel Standalone —— 它是一个浏览器端的即时编译器，不支持 CommonJS（require）或 ES 模块（import/export）语法。这意味着：
- ❌ 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 之前）：
<!-- index.html --> <body> <div id="root"></div> <!-- 先加载组件定义（无 import/export） --> <script type="text/babel" src="js/Hello.js"></script> <!-- 再加载主入口（可直接使用 Hello） --> <script type="text/babel" src="js/index.js"></script> </body>
对应脚本内容如下：
// js/Hello.js
function Hello() {
return <h1>Hello from CDN!</h1>;
}
// ✅ 自动挂载到全局作用域，等价于 window.Hello = Hello// js/index.js
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />); // ✅ 直接使用全局变量 Hello⚠️ 注意事项
- 加载顺序至关重要：含组件定义的 <script> 必须在使用它的脚本之前，否则 Hello 尚未定义。
-
避免命名冲突：若多个组件，建议统一前缀（如 App_Hello, App_Footer），或封装为命名空间对象：
// js/components.js window.App = window.App || {}; App.Hello = function () { return <h1>Hello</h1>; }; App.Goodbye = function () { return <h2>Bye</h2>; };使用时：<App.Hello />
- 不支持热更新/Tree-shaking：此方案适用于学习、原型或极简部署；生产环境强烈推荐使用 Vite、Webpack 或 Create React App 等构建工具启用完整模块系统。
- Babel Standalone 性能提示：它会在浏览器中实时编译 JSX，仅适合开发调试；上线前请预编译或切换为生产版 babel.min.js（已默认启用）。
✅ 总结
在无构建工具的 React CDN 场景下，模块化 = 全局变量 + 显式加载顺序。放弃 import/export，拥抱浏览器原生执行模型，即可快速绕过 require is not defined 错误，专注组件逻辑本身。这是轻量级 React 原型开发的经典实践路径。
