在JavaScript模块化的世界中，不同的模块系统允许我们组织和管理代码，确保代码的可重用性和可维护性。以下是您提到的几种模块系统或模式的简要概述：

1. AMD (Asynchronous Module Definition)

   • AMD是RequireJS在推广的模块定义规范。
   • 它允许异步加载模块，这对于大型应用或需要优化加载时间的场景非常有用。
   • 示例：

   define(['dep1', 'dep2'], function(dep1, dep2) {
       // 模块代码
       return someExportedValue;
   });
   

2. CommonJS (CJS)

   • CommonJS是Node.js使用的模块系统。
   • 它基于同步加载模块，但也可以异步加载。
   • 示例：

   const dep1 = require('dep1');
   const dep2 = require('dep2');
   
   // 模块代码
   module.exports = someExportedValue;
   

3. SystemJS

   • SystemJS是一个动态ES模块加载器，允许在浏览器中加载AMD、CJS和ES6模块。
   • 它还提供了一系列工具和插件来增强模块化功能。
   • 示例（使用ES6模块语法，但SystemJS可以加载它）：

   import dep1 from 'dep1';
   import dep2 from 'dep2';
   
   // 模块代码
   export default someExportedValue;
   

4. ES (ES6 Modules)

   • ES6（也称为ECMAScript 2015）引入了原生的模块系统。
   • 它基于静态导入/导出，允许在浏览器和Node.js中使用。
   • 示例：

   import dep1 from './dep1.js';
   import dep2 from './dep2.js';
   
   // 模块代码
   export default someExportedValue;
   

5. IIFE (Immediately Invoked Function Expression)

   • IIFE不是真正的模块系统，但它是一种在全局作用域中创建私有作用域的模式。
   • 它通常用于避免全局命名空间的污染。
   • 示例：

   (function() {
       // 私有变量和函数
       var privateVar = 'I am private!';
   
       // 暴露到全局的变量或函数（可选）
       window.publicVar = 'I am public!';
   })();
   

6. UMD (Universal Module Definition)

   • UMD是一个尝试兼容AMD、CJS和全局变量（无模块环境）的模块定义模式。
   • 它允许一个模块在多种环境中工作，而无需修改代码。
   • 示例（简化版）：

   (function (root, factory) {
       if (typeof define === 'function' && define.amd) {
           // AMD
           define(['dep1', 'dep2'], factory);
       } else if (typeof exports === 'object') {
           // CJS
           module.exports = factory(require('dep1'), require('dep2'));
       } else {
           // 全局变量
           root.returnExports = factory(root.dep1, root.dep2);
       }
   }(this, function (dep1, dep2) {
       // 模块代码
       return someExportedValue;
   }));
   

每种模式都有其优点和适用场景，选择哪种模式取决于您的项目需求、目标环境和团队偏好。

总结

使用node加载的需要使用CommonJs(cjs)

现在最新语法使用的是ES Modules(es)，也是我们常用的语法

但是浏览器可能识别不了es，可以es编译成umd来兼容各个环境