UMD、CJS 模块规范

让我来解释一下 UMD (Universal Module Definition) 和 CJS (CommonJS) 这两种模块规范的区别：

1. CJS (CommonJS)

• 这是 Node.js 采用的模块规范
• 使用 require() 导入模块，module.exports 导出模块
• 是同步加载的
• 主要用于服务器端
• 示例代码：

// 导入
const React = require('react');

// 导出
module.exports = MyComponent;

2. UMD (Universal Module Definition)

• 是一种通用的模块定义规范
• 可以在多种环境下运行（浏览器、Node.js等）
• 会自动检测使用环境，选择合适的模块系统
• 适合作为打包后的发布格式
• 在您提供的代码中，就是使用了 UMD 格式的 React：

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>

主要区别：

1. 使用环境

   • CJS: 主要用于服务器端（Node.js）
   • UMD: 可以同时在浏览器和服务器端使用

2. 加载方式

   • CJS: 同步加载
   • UMD: 可以同步或异步加载

3. 语法差异

   • CJS: 使用 require 和 module.exports
   • UMD: 可以使用 AMD 的 define，CJS 的 require，或直接通过全局变量访问

4. 使用场景

   • CJS: 适合在 Node.js 环境下开发
   • UMD: 适合作为库的发布格式，特别是需要同时支持多种环境的情况

在您提供的示例代码中，使用 UMD 版本的 React 是因为这是一个浏览器环境的演示页面，UMD 格式可以直接通过 <script> 标签加载并在全局作用域中使用 React。