commonjs与es模块的互操作

Mar 15, 2022

nodejs ES 与 CJS 的互操作性

es

为了解决 ESM 和 CJS 的交互性问题，名为 default 的导出名称被赋予了特殊的语法。

import { default as cjs } from 'cjs';

// 下面的导入语句是上面的导入语句中 `{ default as cjsSugar }` 的 "语法糖"
import cjsSugar from 'cjs';

cjs 加载 es

在 nodejs 中，require() 命令是不能加载 ES 模块的，只能使用 import() 方法加载。

不支持的原因是他是同步加载的，而 ES 模块内部可以在顶层使用 await 命令，导致无法被同步加载。

// es
export const a = 1;
export default 2;

// cjs
const foo = require('foo.ejs');
// foo 打印为： Module { a: 1, default: 2 }

import * as m from 'cjs';
console.log(m);
console.log(m === (await import('cjs')));
// 打印:
//   [Module] { default: <module.exports> }
//   true

// cjs.cjs
exports.name = 'exported';

// es
import { name } from './cjs.cjs';
console.log(name);
// 打印: 'exported'

import cjs from './cjs.cjs';
console.log(cjs);
// 打印: { name: 'exported' }

import * as m from './cjs.cjs';
console.log(m);
// 打印: [Module] { default: { name: 'exported' }, name: 'exported' }

// cjs.cjs
module.exports = 'exported';

// es
import { name } from './cjs.cjs';
console.log(name);
// 报错: Error

import cjs from './cjs.cjs';
console.log(cjs);
// 打印: 'exported'

import * as m from './cjs.cjs';
console.log(m);
// 打印: [Module] { default: 'exported' }

// cjs.cjs
exports.a = 'a';
module.exports = 'exported';

// es
import { a } from './cjs.cjs';
console.log(a);
// 报错: undefined

import cjs from './cjs.cjs';
console.log(cjs);
// 打印: 'exported'

import * as m from './cjs.cjs';
console.log(m);
// 打印: [Module] { default: 'exported', a: undefined }

On this page

commonjs与es模块的互操作

nodejs ES 与 CJS 的互操作性

es

cjs 加载 es

es 加载 cjs

Babel

如何将 ES module 降准对接到 Commonjs

问题来了！！！！

参考