教你彻底搞懂ESM与CJS互相转换

在讲解转换之前，我们需要先了解ESM（ECMAScript Modules）和CJS（CommonJS Modules）的基本概念。

ESM和CJS概念

ESM

ESM是一种ECMAScript规范化模块格式，它是ECMAScript 6标准中引入的，它使用import/export关键字进行模块的导入/导出。

示例代码：

// 引入模块
import { sum } from './math.js';

// 导出模块
export function square(num) {
  return num * num;
}

CJS

CJS是一种Node.js中使用的模块化规范，它使用require/module.exports关键字进行模块的导入/导出。

示例代码：

// 引入模块
const math = require('./math.js');

// 导出模块
module.exports = function square(num) {
  return num * num;
}

ESM和CJS互相转换

ESM转换为CJS

在Node.js中使用ESM模块需要进行转换，可以使用babel或者esm等工具进行转换。

使用babel进行转换

安装依赖：

npm install @babel/core @babel/cli @babel/preset-env --save-dev

创建.babelrc文件并配置：

{
  "presets": ["@babel/preset-env"]
}

执行命令：

npx babel src --out-dir lib --extensions ".js" --source-maps inline --ignore node_modules,dist

这里的src是源代码目录，lib是转换后代码目录。

使用esm进行转换

安装依赖：

npm install esm --save-dev

执行命令：

node -r esm app.js

这里的app.js为ESM模块。

CJS转换为ESM

在浏览器或其他支持ESM的环境中使用CJS模块需要进行转换，可以使用rollup、webpack等工具进行转换，这里以rollup为例进行说明。

使用rollup进行转换

安装依赖：

npm install rollup rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-babel @babel/core @babel/preset-env --save-dev

创建rollup配置文件rollup.config.js并配置：

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm'
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**',
      babelrc: false,
      presets: [['@babel/preset-env', { modules: false }]],
      plugins: []
    }),
  ]
}

执行命令：

npx rollup -c

示例

示例一：ESM转换为CJS

源代码：

// src/math.js
export function sum(x, y) {
  return x + y;
}

转换后代码：

// lib/math.js
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.sum = sum;
function sum(x, y) {
  return x + y;
}

示例二：CJS转换为ESM

源代码：

// src/math.js
function add(x, y) {
  return x + y;
}

module.exports = add;

转换后代码：

// dist/bundle.js
function add(x, y) {
  return x + y;
}

export default add;