在纯 cdn + babel standalone 的开发模式下，es 模块（`import`/`export`）不被支持，直接使用 `import` 会导致 `require is not defined` 错误；正确方式是通过全局作用域共享组件，避免模块语法。
当使用 React 官方 CDN（如 react.development.js、react-dom.development.js）配合 Babel Standalone（@babel/standalone）进行快速原型开发时，浏览器环境本身并不支持原生 ES 模块加载，且 Babel Standalone 仅提供语法转换（如 JSX → JS），不包含模块解析或打包能力。因此，import/export 语句会被忽略或抛出 ReferenceError: require is not defined —— 因为 require 是 Node.js 或 Webpack/Rollup 等打包工具提供的运行时 API，CDN 模式下并不存在。
✅ 正确做法：利用全局作用域（Global Scope）传递代码逻辑
将组件定义为普通函数，并确保其声明在全局上下文中（即不包裹在 IIFE、模块作用域或严格模式私有作用域中），使其可被后续 <script> 标签访问：</script>
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>React CDN + Babel</title> <!-- Babel Standalone 必须在 React 之后、业务脚本之前 --> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> </head> <body> <div id="root"></div> <!-- ✅ 关键：按依赖顺序加载，且均声明为 type="text/babel" --> <script type="text/babel" src="js/Hello.js"></script> <script type="text/babel" src="js/index.js"></script> </body> </html>
对应文件内容如下：
// js/Hello.js（无 export，直接挂载到全局）
function Hello() {
return <h1>Hello from CDN!</h1>;
}
// 注意：不要写 export default，也不要包裹在任何闭包中// js/index.js（可直接使用全局变量 Hello）
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Hello />);? 注意事项：
- 加载顺序至关重要：依赖方（index.js）必须在被依赖方（Hello.js）之后加载；
- 统一使用 type="text/babel"：确保 Babel 能对两个文件都执行 JSX 编译；
- 禁止使用模块语法：import、export、require 均不可用；ES6 模块需构建工具支持；
- 避免变量污染与命名冲突：大型项目建议改用 Vite / Create React App 等现代工具链；
- 生产环境不推荐此方式：无 Tree Shaking、无 HMR、无类型检查，仅适用于学习或极简演示。
? 扩展提示：若需复用多个组件，可在 Hello.js 中依次定义：
function Hello() { return <h1>Hello</h1>; }
function Goodbye() { return <h2>Goodbye</h2>; }
// 全局暴露多个标识符，供 index.js 自由调用总结：CDN + Babel 模式本质是「全局脚本拼接」，而非模块化开发。理解这一限制，就能避开 require is not defined 等典型错误，并高效完成教学演示或轻量原型验证。
