ECMAScript modules规范示例详解

最新推荐文章于 2024-04-28 14:06:07 发布

Y T

最新推荐文章于 2024-04-28 14:06:07 发布

阅读量436

点赞数 12

文章标签： ecmascript

本文链接：https://blog.csdn.net/yy1214520/article/details/136050506

版权

本文介绍了ECMAScript模块系统(ESM)在ES6中的引入，包括导出单个成员、默认成员、动态导入等概念，以及在浏览器和Node.js中的支持情况和注意事项。ESM促进了代码的组织和重用，有望成为JavaScript开发的未来标准。

摘要由CSDN通过智能技术生成

ECMAScript (ES) 模块（ESM）是JavaScript的一种模块系统，它在ES6（ECMAScript 2015）中被引入。ESM允许开发者将代码分割成独立的模块，这些模块可以单独加载和执行。以下是一些ESM的基本示例和概念：

在ESM中，你可以使用export关键字来导出模块中的变量、函数或类。这允许其他模块导入并使用这些导出的成员。

导出单个成员：

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

export const pi = 3.14;

导出默认成员：

默认导出只能有一个，它不需要指定名称。

// circle.js
export default function(radius) {
  return Math.PI * radius ** 2;
}

在其他模块中，你可以使用import关键字来导入之前导出的成员。

导入默认成员：

// app.js
import circleArea from './circle.js';

console.log(circleArea(5)); // 输出: 78.5

导入命名成员：

// app.js
import { add, pi } from './math.js';

console.log(add(1, 2)); // 输出: 3
console.log(pi); // 输出: 3.14

导入整个模块：

如果你需要导入一个模块的所有导出，你可以使用*作为通配符。

// app.js
import * as math from './math.js';

console.log(math.add(1, 2)); // 输出: 3
console.log(math.pi); // 输出: 3.14

在ES2020中，引入了import()函数，它允许在运行时动态加载模块。这在需要按需加载模块时非常有用。

// app.js
async function loadModule() {
  const module = await import('./module.js');
  console.log(module.default());
}

loadModule();

大多数现代浏览器都支持ESM，但为了确保兼容性，你可能需要使用Babel或其他工具来转译你的代码。

Node.js从版本12开始支持ESM，但你需要在package.json文件中指定"type": "module"，或者在命令行中使用--experimental-modules标志。

ESM提供了一种清晰、简洁的方式来组织和重用代码。它简化了模块的导入和导出，使得JavaScript项目更加模块化和可维护。随着浏览器和Node.js对ESM的进一步支持，它将成为JavaScript模块化的未来标准。

关注