JavaScript 动态导入：一行代码解构多个导出函数

本文介绍如何使用 `await import()` 语法在单行中解构导入同一模块的多个命名导出函数，避免重复调用 `import()`，提升代码简洁性与执行效率。

在 ES 模块环境中，import() 是一个返回 promise 的动态导入函数，适用于按需加载、条件导入或在非模块（如传统 Commonjs）上下文中使用现代模块。但需注意：import() 返回的是 Promise，因此必须配合 await（在 async 函数中）或 .then() 使用。

要一次性导入并解构多个命名导出（如 del 包中的 deleteAsync、deleteSync 等），推荐写法如下：

// ✅ 正确：一行解构，一次导入，多次复用 const { deleteAsync: del, deleteSync: delSync } = await import('del');

该写法等价于：

• 动态加载 ‘del’ 模块一次；
• 解构其命名导出（注意：del 包默认导出为 undefined，所有功能均以命名导出形式提供，如 deleteAsync、deleteSync）；
• 并可同时重命名（如 deleteAsync: del），保持调用习惯一致。

⚠️ 注意事项：

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

• await import(…) 只能在 async 函数或顶层模块（Top-Level Await）中使用。若在普通 CommonJS gulpfile.js（无 type: “module”）中运行，需确保 node.js 版本 ≥ 14.8 且启用 –experimental-top-level-await，或将其包裹在 async 函数中调用；
• 不可直接在同步上下文中（如普通 require 式 gulpfile）使用 await，否则会报错 SyntaxError: await is only valid in async function；此时应改用链式 .then()，但无法单行解构多个函数——必须分别提取：

// ⚠️ 兼容旧环境的替代方案（不推荐重复导入） let delMod; import('del').then(mod => {   delMod = mod; }); // 后续使用：delMod.deleteAsync(...) / delMod.deleteSync(...)

✅ 最佳实践建议：
将 gulp 配置升级为 ESM（设置 “type”: “module” + .mjs 后缀或 package.json 中声明），即可自然使用顶层 await 和解构导入，代码更清晰、性能更优（模块仅加载一次）：

// gulpfile.mjs export async function clean() {   const { deleteAsync: del, deleteSync: delSync } = await import('del');   await del(['dist/**']);   delSync(['temp/**']); }

总结：一行解构多个函数完全可行，核心是 await import() + 对象解构；关键在于运行环境支持 Top-Level Await 或合理嵌套在 async 上下文中，而非重复调用 import()。