在前端开发中，模块化是一个大家都非常熟悉的主题。随着 ECMAScript 的不断更新，模块化的语法也发生了变化。本文将为大家详细地介绍 ECMAScript 2021 中的模块导入导出语法，帮助大家更好地理解与应用。
导入语法
1. import 语句
在 ECMAScript 2021 中，我们可以使用 import 语句来导入一个或多个模块。
import { ModuleA, ModuleB } from './modules.js';
import ModuleC from './modules.js';上述代码中，可以看到我们使用 import 语句分别导入了三个模块。
- 第一个 import 语句，从 modules.js 中导入了 ModuleA 和 ModuleB 两个模块。
- 第二个 import 语句，则从 modules.js 中导入了一个默认模块 ModuleC。
2. import * 语句
除了可以一次性导入多个模块，我们还可以使用 import * 语句导入整个模块。
import * as myModules from './modules.js';
上述代码中，我们使用 import * 语句导入了 ./modules.js 中所有导出的模块，并放入 myModules 对象中。
3. 动态导入
除了静态导入之外，ECMAScript 2021 还引入了动态导入的概念，即随着代码的执行而动态加载模块。
async function myFunction() {
const myModule = await import('./modules.js');
// do something with myModule
}上述代码中，我们使用了 import 函数动态地加载了 ./modules.js 模块。需要注意的是，import函数返回的是一个 Promise对象，因此我们需要使用 async/await 关键字来保证代码的正确执行。
导出语法
1. export 语句
ECMAScript 2021 中可以使用 export 语句将模块中的变量、函数、类等导出。
// modules.js
export const ModuleA = {};
export function ModuleB() {};
export default class ModuleC {};上述代码中，我们使用 export 语句将 ModuleA、ModuleB 和默认模块 ModuleC 这三个变量导出。
需要注意，使用 export 导出的变量或函数等，如果要导出具体的名称，则需要使用 {} 来包裹，如果是默认导出则不需要 {}。
2. 命名导出
在一些情况下，我们可能需要导出多个具体的变量或函数等，这时就需要使用命名导出。
// modules.js
const ModuleA = {};
function ModuleB() {};
export { ModuleA, ModuleB };上述代码中，我们使用 export { ModuleA, ModuleB } 将 ModuleA 和 ModuleB 两个变量进行命令导出。
3. 默认导出
除了命令导出之外，ECMAScript 2021 还引入了默认导出的概念。
// modules.js
export default class ModuleC {};上述代码中，我们使用 export default 导出了默认模块 ModuleC。需要注意的是，默认模块在导入时不需要花括号 {}。
总结
在本文中，我们详细地介绍了 ECMAScript 2021 中的模块导入导出语法。使用模块化的语法可以帮助我们更好地组织代码，提高代码的可读性和可维护性。希望本文对大家学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6470b296968c7c53b0ecfa1f