JavaScript 中的 CommonJS (CJS) 与 ECMAScript 模块 (ESM)-js教程-PHP中文网

JavaScript 中的 CommonJS (CJS) 与 ECMAScript 模块 (ESM)

WBOY

发布： 2024-07-15 19:19:04

转载

1192人浏览过

javascript 中的 commonjs (cjs) 与 ecmascript 模块 (esm)

javascript 模块在组织代码、增强可重用性和提高应用程序的可维护性方面发挥着至关重要的作用。广泛使用的两个主要模块系统是 commonjs (cjs) 和 ecmascript modules (esm)。了解它们的差异和功能是在您的项目中有效利用它们的关键。

commonjs (cjs)

commonjs 是最初为 node.js 环境设计的模块系统。它强调模块的简单性和同步加载。

commonjs 导出/导入模块

commonjs 中的模块使用 module.exports 导出值、对象或函数。

1.默认导出/导入

// logger.js
function log(message) {
    console.log(message);
}

module.exports = log; // default export

// index.js
const log = require('./logger');

log('this is a log message.'); // output: this is a log message.

登录后复制

2.命名导出/导入

// math.js
function add(a, b) {
    return a + b;
}

function subtract(a, b) {
    return a - b;
}

module.exports = { add, subtract }; // named exports

// index.js
const { add, subtract } = require('./math');

console.log(add(5, 3)); // output: 8
console.log(subtract(5, 3)); // output: 2

登录后复制

ecmascript 模块 (esm)

esm，在 es6（es2015）中引入，是 javascript 的标准化模块系统。它支持同步和异步模块加载，并且在现代浏览器和具有某些配置的 node.js 中原生支持。

立即学习“Java免费学习笔记（深入）”；

百度文心百中

百度大模型语义搜索体验中心

查看详情

ecmascript 导出模块

esm 使用导出语句来导出值、对象或函数。

1.默认导出/导入

// utils.mjs (note the .mjs extension for esm)
function formatname(name) {
    return `mr./ms. ${name}`;
}

export default formatname;

// index.mjs
import formatname from './utils.mjs';

console.log(formatname('john')); // output: mr./ms. john

登录后复制

2.命名出口

// operations.mjs
export function multiply(a, b) {
    return a * b;
}

export function divide(a, b) {
    return a / b;
}

// index.mjs
import { multiply, divide } from './operations.mjs';

console.log(multiply(4, 2)); // output: 8
console.log(divide(10, 2)); // output: 5

登录后复制

3. ecmascript 模块中的混合导出样式

// mixedExports.mjs
function greet(name) {
    return `Hello, ${name}!`;
}

export default greet;

export function goodbye(name) {
    return `Goodbye, ${name}!`;
}

// index.mjs
import sayHello, { goodbye } from './mixedExports.mjs';

console.log(sayHello('Alice')); // Output: Hello, Alice!
console.log(goodbye('Bob')); // Output: Goodbye, Bob!

登录后复制

commonjs 和 esm 之间的主要区别

语法：commonjs 使用 require() 和 module.exports，而 esm 使用 import 和 export 语句。
加载：commonjs 模块是同步加载的，而 esm 支持同步和异步加载。
环境：commonjs 主要在 node.js 中使用，而 esm 在浏览器中原生支持，并且可以通过特定配置（--experimental-modules 标志或 .mjs 文件扩展名）在 node.js 中使用。

兼容性和使用

node.js：commonjs 由于其在 node.js 环境中的长期支持和简单性而仍然流行。
浏览器：随着浏览器越来越多地支持 esm，esm 越来越受欢迎，提供更好的性能和模块化代码加载。

结论

在 commonjs 和 ecmascript 模块之间进行选择取决于您的项目环境和要求。虽然 commonjs 对于 node.js 后端开发来说非常强大，但 esm 提供了跨浏览器和现代 node.js 应用程序的互操作性。了解这些模块系统使开发人员能够有效地利用 javascript 的模块化功能。

通过利用 commonjs 或 esm，开发人员可以增强代码组织、提高项目可扩展性并促进 javascript 项目中的协作。

以上就是JavaScript 中的 CommonJS (CJS) 与 ECMAScript 模块 (ESM)的详细内容，更多请关注php中文网其它相关文章！