ESM（ES Modules）模块化：`import` 与 `export` 的高级用法

ESM 模块化：import 与 export 的高级用法 – 开启现代 JavaScript 的宝藏

各位观众老爷们，大家好！我是你们的老朋友，代码界的段子手，Bug 终结者，今天咱们来聊聊 JavaScript 模块化这个磨人的小妖精，特别是 ESM (ES Modules) 模块化，以及它那两位得力干将：import 和 export。

如果你觉得模块化听起来像量子力学一样晦涩难懂，别怕！今天我就要用最通俗易懂的语言，把这玩意儿掰开了揉碎了，让你彻底搞明白，从此告别“全局变量满天飞”的噩梦，拥抱现代 JavaScript 的优雅与强大。😎

模块化：告别一锅粥，拥抱分餐制

想象一下，你写了一个巨大的 JavaScript 文件，里面包含了所有的变量、函数、类。这就像把所有的食材都扔进一个大锅里乱炖，最后出来的东西，味道肯定不咋地。而且，一旦某个地方出了问题，你想找到罪魁祸首，简直比大海捞针还难。

模块化的出现，就像把这锅乱炖变成了精致的分餐制。它允许你把代码分割成独立的模块，每个模块负责特定的功能，模块之间可以互相引用，但又彼此隔离，互不干扰。这样一来，代码结构更清晰，可维护性更高，复用性更强，简直就是程序员的福音！🎉

ESM：JavaScript 官方认证的模块化方案

在 ESM 之前，JavaScript 社区涌现出了各种各样的模块化方案，比如 CommonJS (Node.js 使用)、AMD (RequireJS 使用) 等。它们各有千秋，但也带来了兼容性问题。你用 CommonJS 写的模块，在浏览器里跑不起来，反之亦然。

ESM 的出现，终结了这场“战国时代”。它是 ECMAScript 标准官方定义的模块化方案，得到了所有现代浏览器的原生支持。这意味着，你用 ESM 写的模块，可以在任何支持 ES6+ 的环境中运行，无需任何额外的转译工具。这简直就是模块化世界的“秦始皇”，统一六国，天下太平！👑

export：模块的门面担当，将价值输出

export 关键字的作用，就是把模块内部的变量、函数、类等“出口”到外部，让其他模块可以引用。它就像一个模块的门面担当，负责展示模块的价值。

export 有两种主要的用法：

• 命名导出 (Named Exports)：使用 export 关键字，将特定的变量、函数、类等导出。一个模块可以有多个命名导出。

  // moduleA.js
  export const name = "张三";
  export function sayHello() {
    console.log("Hello, " + name + "!");
  }
  export class Person {
    constructor(name) {
      this.name = name;
    }
    greet() {
      console.log("My name is " + this.name);
    }
  }

  上面的代码中，我们导出了一个常量 name，一个函数 sayHello，和一个类 Person。

• 默认导出 (Default Exports)：使用 export default 关键字，将一个值作为模块的默认导出。一个模块只能有一个默认导出。

  // moduleB.js
  const message = "Hello, world!";
  export default message;

  上面的代码中，我们将字符串 "Hello, world!" 作为模块的默认导出。默认导出通常用于导出模块的主要功能。

export 的高级用法：骚操作，秀翻天

export 除了上面这些基本用法外，还有一些高级用法，可以让你写出更简洁、更优雅的代码。

• 导出时重命名 (Export Aliasing)：可以使用 as 关键字，在导出时给变量、函数、类等重命名。

  // moduleC.js
  const longVariableName = "一些很长的变量名";
  export { longVariableName as shortName }; // 导出时重命名为 shortName

  这样，在其他模块引用时，就可以使用 shortName 来访问 longVariableName，避免了代码冗余。

• 重新导出 (Re-exporting)：可以将其他模块导出的内容，重新导出到当前模块。

  // moduleD.js
  export { name, sayHello } from "./moduleA.js"; // 重新导出 moduleA.js 中的 name 和 sayHello
  export { default as message } from "./moduleB.js"; // 重新导出 moduleB.js 的默认导出，并重命名为 message

  这种用法可以方便地将多个模块的内容合并到一个模块中，简化模块的引用。

| 特性 | 描述 | 示例 |
| —————- | —————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————- by default，别忘了给我点赞哦！👍