随着前端技术的不断发展，模块化已经成为了前端开发中不可或缺的一部分。而在 ECMAScript 2021 中，ESM (ECMAScript Modules) 成为了官方支持的模块化规范，相比于之前的 CommonJS 规范，ESM 在性能、可靠性和灵活性等方面都有了很大的提升。本文将详细讲解 ECMAScript 2021 中的 ESM 规范，以及如何在项目中应用。
ESM 的基本语法
ESM 的语法与 CommonJS 规范有很大的不同，主要体现在以下几个方面：
导出模块
在 ESM 中，我们使用 export 关键字来导出模块，可以导出变量、函数、类、对象等。
-- -------------------- ---- -------
-- ----
------ ----- ---- - ------
-- ----
------ -------- ---------- -
------------------ -------
-
-- ---
------ ----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------ ----------------
-
-
-- ----
------ ------- -
----- ------
---------- -
------------------ -------
-
-导入模块
在 ESM 中，我们使用 import 关键字来导入模块，可以导入单个变量、函数、类、对象等，也可以导入整个模块。
-- -------------------- ---- ------- -- ------ ------ - ---- - ---- ----------- -- ------ ------ - -------- - ---- ----------- -- ----- ------ - ------ - ---- ----------- -- ------ ------ ------ ---- ----------- -- ------ ------ - -- ------ ---- -----------
ESM 的默认导出
在 ESM 中，我们可以使用 export default 关键字来导出默认对象，一个模块只能有一个默认导出。
-- -------------------- ---- -------
-- ---------
------ ------- -
----- ------
---------- -
------------------ -------
-
-
-- ------
------ ------ ---- -----------
------------------ -- ----- ----ESM 的高级特性
除了基本语法外，ESM 还提供了一些高级特性，让模块的使用更加灵活和高效。
动态导入
ESM 允许我们在运行时动态地导入模块，这个特性在代码分割和懒加载等场景下非常有用。
-- -------------------- ---- ------- -- ---- ------------------------------ -- - ------------------ -- ----- ---- --- -- ---------- ----- ------------- - ------------------- ------------------------- -- - ------------------ -- ----- ---- ---
命名空间导入
ESM 允许我们使用 import * as 的语法来导入整个模块，并将模块中的所有导出都封装在一个对象中。
-- -------------------- ---- ------- -- ---- ------ ----- ---- - ------ ------ -------- ---------- - ------------------ ------- - -- ---- ------ - -- ------ ---- ----------- ------------------------- -- --- ------------------ -- ----- ----
编译时导入
ESM 允许我们在编译时导入模块，可以在构建时将模块打包进去，减少网络请求和加载时间。
// 编译时导入
import { readFileSync } from 'fs';
const content = readFileSync('./data.txt', 'utf-8');
console.log(content);ESM 在项目中的应用
在实际项目中，我们可以使用 ESM 来组织和管理代码，提高代码的可维护性和可扩展性。下面是一个简单的示例，演示了如何使用 ESM 来实现一个简单的计算器。
-- -------------------- ---- ------- -- ------------- ------ -------- ------ -- - ------ - - -- - ------ -------- ----------- -- - ------ - - -- - ------ -------- ----------- -- - ------ - - -- - ------ -------- --------- -- - ------ - - -- - -- ------ ------ - ---- --------- --------- ------ - ---- --------------- ------------------ ---- -- - ----------------------- ---- -- - ----------------------- ---- -- - --------------------- ---- -- -
总结
ESM 是 ECMAScript 2021 中的官方模块化规范，相比于之前的 CommonJS 规范，ESM 在性能、可靠性和灵活性等方面都有了很大的提升。本文详细讲解了 ESM 的语法和高级特性，并提供了一个简单的示例来演示如何在项目中应用 ESM。通过学习本文，相信读者已经对 ESM 有了更深入的了解，可以在实际项目中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f8340dd10417a2223aeafd