import、require、export、module.exports 混合使用详解

阅读时长 4 分钟读完

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 来导出模块。这时需要注意以下几点:

  1. 在同一模块中,不能既使用 require 导入模块,又使用 import 导入模块。
  2. 在同一模块中,不能既使用 module.exports 导出模块,又使用 export 导出模块。
  3. 从 CommonJS 模块(使用 require 和 module.exports)导入的对象是一个值的拷贝,而不是引用。因此,在导入后修改它们将不会影响原始模块的值。
  4. ES6 模块(使用 import 和 export)导入的对象是一个实时绑定的引用,因此在导入后对它们所做的更改将反映在原始模块中。

下面是一个示例代码,演示了如何混合使用这些关键字:

-- -------------------- ---- -------
-- -- -------- ----
----- --------- - ---
-------------- - - --------- --

-- -- --- -------
------ - --------- - ---- -------------
------ - ---------

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------
纠错
反馈