在 ESM 中引入 CommonJS 模块

简介

随着越来越多的 Node.js 项目采用 ESM 作为模块系统,一些较旧的 CommonJS 模块依然被广泛使用。由于这两者的模块系统存在一些差异,我们可能会面临引入 CommonJS 模块到 ESM 项目中的挑战。

这种兼容性问题主要表现为:

  • ESM 模块系统使用 importexport,而 CommonJS 使用 requiremodule.exports
  • Node.js 对文件扩展名(如 .js, .mjs, .cjs)的处理方式不同,可能会导致加载错误。

在 ESM 中引入 CommonJS 模块的几种方式

方法 1:使用 .cjs 后缀和 require()(同步加载)

这是最推荐的方式,它让你明确指定文件是 CommonJS 模块,并允许你使用同步的 require() 来导入模块。

步骤

  1. 确保 CommonJS 模块使用 .cjs 后缀。
  2. 使用 createRequire 方法来引入 CommonJS 模块。
javascript 复制代码
// cjs-file.cjs
module.exports = {
  sayHi(name) {
    console.log(`Hi, ${name} from CommonJS`);
  }
};
javascript 复制代码
// esm-file.js
import { createRequire } from 'module';
const require = createRequire(import.meta.url);

const cjs = require('./cjs-file.cjs');
cjs.sayHi('Alice');

优点

  • 同步加载,代码简单直观。
  • 兼容性好,适用于大多数 Node.js 项目。

方法 2:使用动态 import()(异步加载)

当你不能或不想使用 .cjs 后缀时,可以使用动态 import() 来加载 CommonJS 模块。由于 import() 是异步的,你需要使用 await.then() 来处理加载。

dart 复制代码
// esm-file.js
const cjsModule = await import('./cjs-file.js');  // 动态导入
cjsModule.default.sayHi('Alice');

优点

  • 灵活性高,可以按需加载模块。
  • 不要求模块使用 .cjs 后缀。

缺点

  • 异步加载,代码稍显复杂。
  • 需要使用 default 属性来访问 CommonJS 导出的内容。
相关推荐
bingbingyihao5 小时前
Node.js 模拟 Linux 环境
linux·node.js
吳所畏惧7 小时前
NVM踩坑实录:配置了npm的阿里云cdn之后,下载nodejs老版本(如:12.18.4)时,报404异常,下载失败的问题解决
前端·windows·阿里云·npm·node.js·batch命令
JS_Love9 小时前
nodejs 手动实现 multipart/byteranges 分块下载
node.js
白一梓10 小时前
Node.js 流全解
node.js
门前云梦1 天前
ollama+open-webui本地部署自己的模型到d盘+两种open-webui部署方式(详细步骤+大量贴图)
前端·经验分享·笔记·语言模型·node.js·github·pip
Watermelo6171 天前
Web Worker:让前端飞起来的隐形引擎
前端·javascript·vue.js·数据挖掘·数据分析·node.js·es6
前端老鹰1 天前
Node.js 日志处理利器:pino 模块全面解析
后端·node.js
JiaLin_Denny1 天前
Node.js 版本兼容问题:minimatch@10.0.3和minio@7.0.28 冲突的解决
node.js·node安装包冲突
rogerogers2 天前
告别 Node 版本混乱!fnm 让你的开发环境丝滑起飞
javascript·node.js
NeverSettle_2 天前
AI SSE 技术文档
前端·node.js