CJS模块间如何实现互相调用？

CommonJS与ESM互相调用

CommonJS和ESM（ECMAScript模块）是JavaScript中两种不同的模块系统，CommonJS是Node.js最初支持的模块系统，使用require()函数来导入模块，并使用module.exports或exports对象来导出模块，而ESM是JavaScript的标准模块系统，使用import和export关键字来导入和导出模块，尽管它们在语法和使用上有所不同，但在实际开发中，我们经常需要它们相互调用。

表格对比

特性	CommonJS	ES Modules (ESM)
导入语法	const module = require('module')	import * as Name from 'module'
导出语法	module.exports = {...}	export const x = 1
默认导出	module.exports = function() {}	export default function() {}
动态导入	不支持	import('/path/to/module').then(...)
浏览器支持	不支持	支持
Tree Shaking	不支持	支持

具体实现方法

1、CommonJS调用ESM：

在CommonJS模块中使用require函数导入ESM模块时，可以使用esm库来实现兼容性，首先安装esm库：

     npm install esm

在CommonJS模块中使用以下代码导入ESM模块：

     require = require("esm")(module);
     const Test = require("./test.mjs");
     console.log(Test); // { name: 'berserker', default: 'fate' }

2、ESM调用CommonJS：

在ESM模块中直接使用import函数导入CommonJS模块即可。

     import { createRequire } from 'node:module';
     const require = createRequire(import.meta.url);
     const cjsModule = require('./cjs-module');

示例代码

1、CommonJS模块（cjs-module.js）：

   const hero = function (name) {
     console.log(name);
   };
   const core = {
     version: '1.0'
   };
   module.exports = {
     hero,
     core
   };

2、ESM模块（test.mjs）：

   export const name = "berserker";
   export default "fate";

3、在CommonJS模块中调用ESM模块：

   require = require("esm")(module);
   const Test = require("./test.mjs");
   console.log(Test); // { name: 'berserker', default: 'fate' }

4、在ESM模块中调用CommonJS模块：

   import { createRequire } from 'node:module';
   const require = createRequire(import.meta.url);
   const cjsModule = require('./cjs-module');
   console.log(cjsModule);

通过上述方法，我们可以实现CommonJS和ESM模块之间的相互调用，这种互操作性使得开发者能够在一个项目中灵活地使用不同的模块系统，从而更好地适应不同的项目需求和技术栈，无论是在Node.js环境中还是在现代浏览器环境中，掌握这两种模块系统的互操作技巧都是非常重要的。

常见问题解答

Q1: 如何在CommonJS模块中使用ESM模块？

A1: 在CommonJS模块中使用ESM模块，可以通过安装并使用esm库来实现，首先安装esm库：

npm install esm

然后在CommonJS模块中使用以下代码导入ESM模块：

require = require("esm")(module);
const Test = require("./test.mjs");
console.log(Test); // { name: 'berserker', default: 'fate' }

Q2: 如何在ESM模块中使用CommonJS模块？

A2: 在ESM模块中直接使用import函数导入CommonJS模块即可。

import { createRequire } from 'node:module';
const require = createRequire(import.meta.url);
const cjsModule = require('./cjs-module');
console.log(cjsModule);

各位小伙伴们，我刚刚为大家分享了有关“cjs互相调用”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！