Ru果把软件开发比作一次旅行，那么模块化就是那条指向目的地的路标。没有它，代码会像无头的羊群四处乱撞；有了它，即使团队规模扩大，也Neng保持清晰的方向。

模块化本质上是把大块代码拆成可独立维护的小单元，每个单元只负责自己的职责，并通过明确的接口相互协作。没有这层约束，你会遇到：

全局变量横行，导致命名冲突；

功Neng耦合过紧，改动一行代码可Neng牵连十几个文件；

构建体积失控，加载时间飙升。

为了解决这些痛点，JavaScript 社区先后诞生了两套主流方案——CommonJS 与 ECMAScript Modules 。

CJS是 Node Zui早实现的模块系统，核心 API 为 require 与 module.exports。它的出现让当时还没有官方模块规范的 JavaScript Neng够在服务器端跑起来可谓一次革命。

然而随着浏览器原生支持import/export语法，前端生态迅速围绕 ESM 打造工具链、框架和库。Node 为了不把Yi经拥有海量 npm 包的生态踩在脚下只好在 2020 年正式加入对 ESM 的实验性支持，并在随后几次 LTS 中逐步完善。

兼容并不是“一键切换”。Zui常见的问题是命名导出失效

// legacy.cjs
exports.foo =  => {};
exports.bar =  => {};
// new.mjs
import { foo } from './legacy.cjs'; // ❌ undefined
// 正确写法
import pkg from './legacy.cjs';
const { foo } = pkg; // ✅ 正常

背后的根源在于 CJS 的导出对象是运行时才确定，而 ESM 在编译阶段就要完成静态分析。Node 为了不破坏旧代码，只Neng把整个 CJS 包裹成默认导出，这既保留了兼容性，也埋下了坑。

.package.json#exports: 从单一入口"main"/"module"演进为条件导出，让库作者Ke以同时提供 CJS 与 ESM 版本。

CreateRequire API: 在 ESM 中临时调用 CJS，实现“后门”兼容。

.cjs/.mjs 名普及率上升：Eslint、TypeScript、Vite 等新工具默认推荐 .mjs。

.官方声明：NPM 官方博客多次强调，新特性仅面向 ESM 开放。

这些信号共同指向一个趋势：**ESM 将成为默认路径**，而 CJS 渐入维护模式。

确认入口文件类型：

{
  "type": "module"
}

使用双入口发布： 在package.json中配置"exports", 同时提供"require"/"import"两条路径：

{
  "exports": {
    ".": {
      "require": "./dist/index.cjs",
      "import": "./dist/index.mjs"
    }
  }
}

Pain Point – 条件导出优先级： 当同时存在"default"/"node"

CreateRequire “救急箱”： 当某个老库只Neng用 CJS 导入时在 ESM 文件里这样写：

import { createRequire } from 'module';
const require = createRequire;
const legacy = require; // OK

// src/index.mjs   <-- ES Module 主体
export function greet {
  return `Hello, ${name}!`;
}
// src/index.cjs   <-- CommonJS 包装层
const { greet } = require;
module.exports = { greet };

// package.json   <-- 同时暴露两种入口
{
  "name": "dual-lib",
  "type": "module",
  "main": "./dist/index.cjs",
  "exports": {
     ".": {
         "import": "./dist/index.mjs",
         "require": "./dist/index.cjs"
     }
   },
   "scripts": {
       "build:cjs": "tsc -t es5 -m commonjs -outDir dist && cp src/*.cjs dist/",
       "build:mjs": "tsc -t es2020 -m esnext -outDir dist && cp src/*.mjs dist/"
   }
}