背景
在现代前端开发中，模块化已成为不可避免的趋势。模块化可以将代码拆分为独立的模块，提高代码可维护性和可重用性。在 JavaScript 中，ES6 模块和 CommonJS 模块是两种常用的模块化方案。本文将深入探讨这两种模块化方案的差异及其相互调用方法。
ES6 模块
ES6 模块是 ECMAScript 6 标准中新增的模块化方案。ES6 模块使用 export 关键字将模块中的变量、函数、类等导出，使用 import 关键字将其他模块中导出的内容引入。ES6 模块的特点如下：
- 采用静态引入，编译时确定依赖关系，避免了 CommonJS 模块的循环依赖问题。
- 导入和导出语句只能在模块的顶层使用，不能在代码块中使用。
- 导入和导出语句是动态执行的，可以使用变量作为模块名或导出的内容。
- ES6 模块默认使用严格模式，不允许出现未声明的变量。
导出
使用 export 关键字将模块中的变量、函数、类等导出。可以使用 export default 关键字将一个模块作为默认导出，一个模块只能有一个默认导出。
-- -------------------- ---- -------
-- ----
------ ----- - - --
-- ----
------ -------- ----- -
-------------------
-
-- ---
------ ----- --- -
------------- -
-------------------
-
-
-- ------
------ ------- -
--
----
---
--导入
使用 import 关键字将其他模块中导出的内容引入。可以使用 import * as 语法将一个模块中的所有导出作为一个对象引入。
// 引入默认模块
import myModule from './myModule';
// 引入具名导出
import { a, foo, Bar } from './myModule';
// 引入一个模块中的所有导出
import * as myModule from './myModule';CommonJS 模块
CommonJS 模块是 Node.js 中使用的模块化方案，也被广泛应用于前端开发中。CommonJS 模块使用 module.exports 将模块中的变量、函数、类等导出，使用 require 函数将其他模块中导出的内容引入。CommonJS 模块的特点如下：
- 采用动态引入，运行时确定依赖关系，存在循环依赖问题。
- 导入和导出语句可以在代码块中使用。
- 导入和导出语句是动态执行的，不能使用变量作为模块名或导出的内容。
- CommonJS 模块不默认使用严格模式，允许出现未声明的变量。
导出
使用 module.exports 将模块中的变量、函数、类等导出。可以使用 exports 对象将多个导出打包成一个对象导出。
-- -------------------- ---- -------
-- ----
--------- - --
-- ----
----------- - ---------- -
-------------------
--
-- ---
----------- - ----- -
------------- -
-------------------
-
--
-- ------
-------------- - -
-- ----------
---- ------------
---- -----------
--导入
使用 require 函数将其他模块中导出的内容引入。可以使用 require 函数动态加载模块。
// 引入模块
const myModule = require('./myModule');
// 引入具名导出
const { a, foo, Bar } = require('./myModule');ES6 模块和 CommonJS 模块的相互调用
在 Node.js 中，可以使用 import 关键字引入 CommonJS 模块，也可以使用 require 函数引入 ES6 模块。ES6 模块和 CommonJS 模块的相互调用方法如下：
ES6 模块引入 CommonJS 模块
可以使用 require 函数引入 CommonJS 模块，引入的内容是一个对象，对象的属性名是 CommonJS 模块中导出的名称，属性值是导出的内容。
-- -------------------- ---- -------
-- -------- --
-------------- - -
-- --
---- ---------- -
-------------------
--
---- ----- -
------------- -
-------------------
-
-
--
-- --- --
------ -------- ---- -------------
-- -- -------- --
----- -------------- - ----------------------------
-- -- -------- ------
------------------------------
---------------------
--- ---------------------CommonJS 模块引入 ES6 模块
可以使用 import 关键字引入 ES6 模块，引入的内容是一个对象，对象的属性名是 ES6 模块中导出的名称，属性值是导出的内容。
-- -------------------- ---- -------
-- --- --
------ ----- - - --
------ -------- ----- -
-------------------
-
------ ----- --- -
------------- -
-------------------
-
-
-- -------- --
----- -------- - ----------------------
-- -- --- --
------ - -- --------- ---- --------------
-- -- --- ------
-------------------------
----------------
--- ----------------总结
ES6 模块和 CommonJS 模块是两种常用的模块化方案，它们具有不同的特点和用法。在实际开发中，需要根据具体的需求选择合适的模块化方案。同时，ES6 模块和 CommonJS 模块的相互调用方法可以帮助我们在不同的模块化方案间进行转换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d8226e1886fbafa45d2d21