随着 JavaScript 项目的不断增多，模块化开发已经成为了必须的选择。在 ES6 中，我们通过 import 和 export 关键字来实现模块的导入和导出。而在 ES12 中，我们可以使用一些新的语法来优化这些操作，让我们来一探究竟。
新的导入语法
import()
ES12 中新增了一个 import() 函数，它允许我们动态地加载一个模块。这个函数返回一个 Promise 对象，当加载完成后，resolve 的参数就是导入的模块。
import("./myModule.js")
.then((module) => {
// module 是导入的模块
module.myFunc();
})
.catch((error) => {
console.error("模块加载失败！", error);
});import.meta
import.meta 对象包含了当前模块的元数据，包括模块的 URL、文件名、环境变量等等。我们可以通过这个对象来获取这些元数据信息。
console.log(import.meta.url); // 打印出当前模块的 URL
新的导出语法
export * as
ES6 中，我们通过 export { foo, bar } from "./myModule.js"; 的方式来导出模块中的多个子模块。但是，如果我们想要将一个模块中的所有子模块都导出，我们就需要一个一个列出它们的名称，很麻烦。而在 ES12 中，我们可以使用 export * as 语法来实现这个功能。
// 在 myModule.js 中： export const foo = "foo"; export const bar = "bar"; export const baz = "baz"; // 在 index.js 中： // 将 myModule.js 中的所有子模块都导出为 myModule export * as myModule from "./myModule.js";
export { key as newKey }
有时我们在导出模块时，想要修改模块中某个属性的名称，但是不希望修改该属性的实际值。在 ES12 中，我们可以使用 export { key as newKey } 的语法来实现这个功能。
// 在 myModule.js 中：
export const gender = "male";
// 在 index.js 中：
export { gender as sex } from "./myModule.js";export default {}
ES6 中，我们使用 export default myFunc 的方式来导出默认的函数或对象。而在 ES12 中，我们可以使用 export default {} 的方式来导出一个对象，该对象包含了我们想要导出的所有属性和方法。
-- -------------------- ---- ------- -- - ----------- -- ------ -------- -------- - --------------- ----------- - ------ ----- ----- - --- ---------- -- - -------- -- ------ ------- - ------- ------ --
总结
ES12 中的导入导出语法优化方案让我们在模块化开发中更加方便地管理和使用模块，提高了开发效率。我们可以使用 import() 函数来动态地加载模块，使用 import.meta 对象获取元数据信息，使用 export * as 导出所有子模块，使用 export { key as newKey } 修改属性名称，使用 export default {} 导出一个对象。在实际开发中，根据具体需求选择合适的语法将是比较明智的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646abedb968c7c53b0a3c626