【Node.js】模块机制深度解析：从 CommonJS 到 ESM 的进化之路

1
// Node.js自动生成的IIFE
2
(function (exports, require, module, __filename, __dirname) {
3
  // 模块原代码开始
4
  const fs = require('fs');
5
  const path = require('path');
6
  const logPath = path.join(__dirname, 'app.log');
7
  function writeLog(level, message) { /* ... */ }
8
  module.exports = { info: /* ... */, error: /* ... */ };
9
  // 模块原代码结束
10
})(module.exports, require, module, '/path/to/logger.js', '/path/to');

1
// Button.mjs（ESM模块）
2
export const PrimaryButton = ({ children }) => (
3
  <button
4
    style={{
5
      padding: '8px 16px',
6
      border: 'none',
7
      borderRadius: '4px',
8
      backgroundColor: '#007bff',
9
      color: 'white',
10
      cursor: 'pointer',
11
    }}
12
  >
13
    {children}
14
  </button>
15
)
16

17
export const SecondaryButton = ({ children }) => (
18
  <button
19
    style={{
20
      padding: '8px 16px',
21
      border: '1px solid #6c757d',
22
      borderRadius: '4px',
23
      backgroundColor: 'white',
24
      color: '#6c757d',
25
      cursor: 'pointer',
26
    }}
27
  >
28
    {children}
29
  </button>
30
)
31

32
export default PrimaryButton // 默认导出（方便导入）

1
// App.mjs（ESM入口文件）
2
import PrimaryButton from './Button.mjs' // 导入默认导出
3
// import { PrimaryButton } from './Button.mjs'; // 也可以导入命名导出
4

5
function App() {
6
  return (
7
    <div style={{ padding: '20px' }}>
8
      <PrimaryButton>提交订单</PrimaryButton>
9
      {/* 未使用SecondaryButton */}
10
    </div>
11
  )
12
}
13

14
export default App

1
{
2
  "name": "koa-esm-demo",
3
  "type": "module",
4
  "scripts": {
5
    "start": "node server.mjs"
6
  },
7
  "dependencies": {
8
    "koa": "^2.14.0"
9
  }
10
}

1
// server.mjs（ESM模块）
2
import Koa from 'koa' // 导入CommonJS模块（koa是CommonJS）
3
import { info, error } from './logger.mjs' // 导入ESM模块
4

5
const app = new Koa()
6

7
// 中间件1：日志记录（ESM模块的使用）
8
app.use(async (ctx, next) => {
9
  info(`${ctx.method} ${ctx.url}`) // 记录请求方法和路径
10
  await next()
11
})
12

13
// 中间件2：处理请求（返回Hello ESM）
14
app.use(async (ctx) => {
15
  ctx.body = 'Hello ESM!'
16
})
17

18
// 启动服务
19
app.listen(3000, () => {
20
  info('Server running on http://localhost:3000')
21
})

1
// logger.mjs（ESM模块）
2
import fs from 'fs'
3
import path from 'path'
4

5
const logPath = path.join(process.cwd(), 'app.log') // 日志文件路径
6

7
// 导出info方法（命名导出）
8
export function info(message) {
9
  const logLine = `${new Date().toISOString()} [INFO] ${message}\n`
10
  fs.appendFileSync(logPath, logLine)
11
  console.log(logLine.trim()) // 打印到控制台
12
}
13

14
// 导出error方法（命名导出）
15
export function error(message) {
16
  const logLine = `${new Date().toISOString()} [ERROR] ${message}\n`
17
  fs.appendFileSync(logPath, logLine)
18
  console.error(logLine.trim()) // 打印到控制台（错误级别）
19
}

1
// utils.cjs（CommonJS模块）
2
module.exports = {
3
  formatDate: (date) => {
4
    return new Intl.DateTimeFormat('zh-CN', {
5
      year: 'numeric',
6
      month: '2-digit',
7
      day: '2-digit',
8
    }).format(date)
9
  },
10
}

1
// App.mjs（ESM模块，Vite项目入口）
2
import utils from './utils.cjs' // CommonJS的module.exports作为默认导出
3
import { useState } from 'react'
4

5
function App() {
6
  const [currentDate, setCurrentDate] = useState(new Date())
7

8
  return (
9
    <div className="app">
10
      <h1>当前日期：{utils.formatDate(currentDate)}</h1>
11
      <button onClick={() => setCurrentDate(new Date())}>刷新日期</button>
12
    </div>
13
  )
14
}
15

16
export default App

1
// logger.mjs（ESM模块）
2
import fs from 'fs/promises'
3
import path from 'path'
4

5
const logPath = path.join(process.cwd(), 'app.log')
6

7
export async function info(message) {
8
  const logLine = `${new Date().toISOString()} [INFO] ${message}\n`
9
  await fs.appendFile(logPath, logLine) // 异步写入，适合高并发服务
10
  console.log(logLine.trim())
11
}
12

13
export async function error(message) {
14
  const logLine = `${new Date().toISOString()} [ERROR] ${message}\n`
15
  await fs.appendFile(logPath, logLine)
16
  console.error(logLine.trim())
17
}

1
// app.cjs（CommonJS模块，Koa服务入口）
2
const Koa = require('koa')
3
const app = new Koa()
4

5
// 动态导入ESM的logger.mjs（CommonJS无法用require直接导入）
6
let logger
7
;(async () => {
8
  logger = await import('./logger.mjs') // 动态导入返回Promise
9
  await logger.info('Logger initialized') // 初始化日志模块
10
})()
11

12
// 中间件1：日志记录（使用ESM的logger）
13
app.use(async (ctx, next) => {
14
  if (!logger) await new Promise((resolve) => setTimeout(resolve, 100)) // 等待logger初始化
15
  await logger.info(`${ctx.method} ${ctx.url}`)
16
  await next()
17
})
18

19
// 中间件2：处理请求
20
app.use(async (ctx) => {
21
  ctx.body = 'Hello CommonJS + ESM!'
22
})
23

24
// 启动服务
25
app.listen(3000, async () => {
26
  if (!logger) await new Promise((resolve) => setTimeout(resolve, 100))
27
  await logger.info('Server running on http://localhost:3000')
28
})