ES Module 的基本概念

ES Module（ECMAScript Modules）是 JavaScript 的官方模块化标准，用于在浏览器和 Node.js 中组织和加载代码。它通过 import 和 export 语法实现模块的导入和导出。

导出模块

使用 export 关键字可以导出变量、函数或类。导出分为命名导出和默认导出。

命名导出允许导出多个值：

// 导出单个变量
export const name = 'Module';

// 导出函数
export function greet() {
  return 'Hello';
}

// 导出类
export class Person {
  constructor(name) {
    this.name = name;
  }
}

默认导出只能导出一个值：

// 默认导出一个函数
export default function() {
  return 'Default Export';
}

导入模块

使用 import 关键字可以导入其他模块的导出内容。导入方式与导出方式对应。

从命名导出导入：

// 导入单个命名导出
import { name } from './module.js';

// 导入多个命名导出
import { name, greet } from './module.js';

// 重命名导入
import { name as moduleName } from './module.js';

从默认导出导入：

// 导入默认导出
import defaultExport from './module.js';

同时导入命名和默认导出：

import defaultExport, { name, greet } from './module.js';

动态导入

动态导入允许按需加载模块，返回一个 Promise：

import('./module.js').then(module => {
  console.log(module.name);
});

浏览器中使用 ES Module

在 HTML 中通过 type="module" 属性加载模块：

<script type="module" src="main.js"></script>

模块脚本默认启用严格模式，且支持跨域请求。

Node.js 中使用 ES Module

在 Node.js 中，可以通过以下方式启用 ES Module：

1. 使用 .mjs 扩展名。
2. 在 package.json 中设置 "type": "module"。

模块的特性

• 模块拥有自己的作用域，变量不会污染全局。
• 模块是单例的，多次导入只会执行一次。
• 模块是静态的，导入导出必须在顶层作用域。
• 模块支持循环依赖，但需谨慎设计。

与 CommonJS 的区别

• ES Module 是静态的，CommonJS 是动态的。
• ES Module 是异步加载，CommonJS 是同步加载。
• ES Module 支持 Tree Shaking，CommonJS 不支持。
• ES Module 的 this 是 undefined，CommonJS 的 this 指向当前模块。