ES6 模块化、CommonJS 模块化的区别经典面试题

1. 语法差异:

   • ES6 模块化 使用 import 和 export 关键字来导入和导出模块。

   javascriptCopy code// 导入模块
   import { someFunction } from 'someModule';
   ​
   // 导出模块
   export function myFunction() {
     // code
   }

   • CommonJS 模块化 使用 require 和 module.exports 或 exports 来导入和导出模块。

   javascriptCopy code// 导入模块
   const someModule = require('someModule');
   ​
   // 导出模块
   module.exports = {
     myFunction: function() {
       // code
     }
   };

2. 加载时机:

   • ES6 模块化 是静态的，意味着模块在解析阶段就会被加载，而不是在运行时。这使得工具可以在编译时进行优化。

   • CommonJS 模块化 是动态的，模块在运行时加载，这使得一些优化手段无法在编译时进行。

3. 导入和导出的方式:

   • ES6 模块化 是明确的，你必须在代码的顶层使用 import 和 export，不能在条件语句中使用。

   • CommonJS 模块化 允许在运行时动态导入模块，也可以在条件语句中使用 require。

4. 导出的内容:

   • ES6 模块化 可以导出任何 JavaScript 变量，包括基本类型、函数、类等。

   • CommonJS 模块化 主要导出的是对象，可以将多个变量放在一个对象中导出。

5. 循环依赖处理:

   • ES6 模块化 能够正确处理循环依赖，因为在静态解析阶段就已经确定了导入关系。

   • CommonJS 模块化 对循环依赖的处理相对复杂，可能需要在运行时解析。

总体来说，ES6 模块化更加现代且具有一些优势，尤其在静态分析和编译优化方面。然而，CommonJS 仍然在许多服务器端和早期的前端项目中广泛使用。在前端开发中，随着浏览器对 ES6 模块的支持变得更加普遍，ES6 模块化正逐渐成为主流。