JavaScript 是一门支持模块化的语言，而在前端开发中，import、require、export 和 module.exports 是常用的模块化方案。本文将深入探讨这些关键字的用法和区别，并提供实例代码。
require 和 module.exports
在 Node.js 环境下，我们通常使用 require 来导入一个模块，使用 module.exports 或 exports 来导出一个模块。具体来说：
-- ------ ----- -------- - ---------------------- -- ------ -------------- - - ------------- --------- --
在上面的示例中，我们首先使用 require 来导入名为 myModule 的模块文件，然后通过 module.exports 导出一个对象，包含了一些函数和变量。注意，这里也可以使用 exports 代替 module.exports，如下所示：
-------------------- - -- -- - -- --- -- -- ----------------- - ---
需要注意的是，使用 exports 只能导出单个对象或函数，同时不能直接对 exports 进行赋值，否则会破坏它与 module.exports 的引用关系。因此，建议在 Node.js 中始终使用 module.exports 来导出模块。
import 和 export
在 ES6 之后，JavaScript 增加了一种新的模块化方案，其中使用 import 来导入一个模块，使用 export 来导出一个模块。具体来说：
-- ------ ------ - ------------- --------- - ---- ------------- -- ------ ------ - ------------- --------- --
在上面的示例中，我们首先使用 import 来导入名为 myModule 的模块文件中的一些函数和变量，然后使用 export 导出一个对象，包含了这些函数和变量。
需要注意的是，ES6 模块化方案是静态的，这意味着无法在运行时动态地导入或导出模块。此外，ES6 模块化方案还支持默认导出和命名导出两种方式，如下所示：
-- ---- ------ ----- --------- - --- ------ -------- -------------- - -- --- -- -- -- ---- ------ ------- - ---------- ------------ --
在上面的示例中，我们通过 export 关键字进行了命名导出和默认导出。其中，命名导出使用了 const 和 function 来定义变量和函数，而默认导出则使用了 default 关键字。
混合使用
在实际开发中，我们可能会同时使用 require 和 import 来导入模块，并且也可能同时使用 module.exports 和 export 来导出模块。这时需要注意以下几点：
- 在同一模块中，不能既使用 require 导入模块，又使用 import 导入模块。
- 在同一模块中，不能既使用 module.exports 导出模块，又使用 export 导出模块。
- 从 CommonJS 模块（使用 require 和 module.exports）导入的对象是一个值的拷贝，而不是引用。因此，在导入后修改它们将不会影响原始模块的值。
- ES6 模块（使用 import 和 export）导入的对象是一个实时绑定的引用，因此在导入后对它们所做的更改将反映在原始模块中。
下面是一个示例代码，演示了如何混合使用这些关键字：
-- -- -------- ---- ----- --------- - --- -------------- - - --------- -- -- -- --- ------- ------ - --------- - ---- ------------- ------ - --------- ----------------------------------------------------------- ---------- ---------------------------------------------------------------------------------------