在纯 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、模块作用域或严格模式私有作用域中），使其可被后续

对应文件内容如下：

// js/Hello.js（无 export，直接挂载到全局）
function Hello() {
  return 
Hello from CDN!
;
}
// 注意：不要写 export default，也不要包裹在任何闭包中

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

? 注意事项：

• 加载顺序至关重要：依赖方（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 
Hello
; }
function Goodbye() { return 
Goodbye
; }
// 全局暴露多个标识符，供 index.js 自由调用

总结：CDN + Babel 模式本质是「全局脚本拼接」，而非模块化开发。理解这一限制，就能避开 require is not defined 等典型错误，并高效完成教学演示或轻量原型验证。