随着 JavaScript 向现代化发展，模块化编程成为大型项目的基石。ES6 引入了原生模块系统（ES Modules, ESM），为开发者提供了更加高效、规范和可优化的模块管理方式。

本文将系统讲解 ES6 模块的核心机制，并重点介绍 import.meta 以及模块对象的结构和用法，帮助你全面理解 ESM 在实践中的应用。

一、ES6 模块核心特性

1. 静态结构（Static Structure）

ES6 模块在 编译阶段 即确定模块依赖，便于构建工具进行优化（如 Tree-shaking）。

import { sum } from './math.js';

相比之下，CommonJS 使用 require() 是运行时动态加载的，不利于静态分析。

2. 模块作用域隔离

每个模块都有自己的作用域，定义的变量不会污染全局，也不会影响其他模块。

3. 导出方式：命名导出与默认导出

// math.js
export const PI = 3.14;
export default function (x) {
  return x * PI;
}

// main.js
import circle, { PI } from './math.js';

二、模块加载机制简析

1. 浏览器中：

• 通过 <script type="module"> 加载；
• 模块脚本默认严格模式；
• 同源策略更严格（默认启用 CORS）；
• 模块异步加载，不阻塞主线程；
• 每个模块只会被加载和执行一次（即使被多次引用）。

2. Node.js 中：

• 启用 .mjs 后缀，或设置 package.json 中 "type": "module"；
• 使用文件路径作为模块标识；
• 默认禁用 CommonJS 的全局变量（如 __dirname），推荐使用 import.meta.url。

三、模块对象结构解析

当你使用 import * as mod 导入模块时，得到的是一个模块对象，它包含了该模块导出的所有绑定。

// example.js
export const version = '1.0.0';
export function greet(name) {
  return `Hello, ${name}`;
}
export default 'default-export';

// main.js
import * as mod from './example.js';
console.log(Object.keys(mod)); // ['version', 'greet', 'default']

1. 模块对象的特点：

2. 示例：live binding 的效果

// counter.js
export let count = 0;
export function inc() {
  count++;
}

// main.js
import * as counter from './counter.js';
console.log(counter.count); // 0
counter.inc();
console.log(counter.count); // 1（绑定生效）

四、如何遍历模块对象

你可以使用 Object.keys 或 Object.entries 遍历模块对象的所有导出成员：

import * as mod from './example.js';
for (const key of Object.keys(mod)) {
  console.log(`${key}:`, mod[key]);
}

或：

Object.entries(mod).forEach(([key, value]) => {
  console.log(`${key}:`, value);
});

输出：

version: 1.0.0
greet: [Function: greet]
default: default-export

五、import.meta：模块元信息对象

1. import.meta 是什么？

它是一个由运行时自动填充的模块元信息对象，包含当前模块的上下文信息。

console.log(import.meta.url); // 模块的绝对 URL

输出示例：

file:///Users/mlight/project/main.js

2. 浏览器与 Node.js 中的差异：

// Vite 自动注入
if (import.meta.env.DEV) {
  console.log('开发模式');
}

3. 与模块对象的区别：

六、动态导入与顶层 await

1. import()：动态导入模块

import('./math.js').then(mod => {
  console.log(mod.sum(2, 3));
});

特点：

• 返回 Promise；
• 可用于懒加载、按需加载、路由分包；
• 可用于条件导入模块。

2. 顶层 await

在模块中允许在顶层使用 await（无需函数封装）：

const response = await fetch('/api/data');
const data = await response.json();
console.log(data);

⚠️ 仅适用于 ESM 模块，不支持普通 <script> 脚本。

七、模块循环引用（Circular Import）

ES6 模块支持循环引用，但不建议过度依赖。

// a.js
import { b } from './b.js';
export const a = 'A';
console.log('from b:', b);
// b.js
import { a } from './a.js';
export const b = 'B';
console.log('from a:', a);

循环引用的变量可能为 undefined，ESM 会保证模块执行顺序正确，但需谨慎使用。

八、综合实践示例

// math.js
export const PI = 3.14;
export const add = (a, b) => a + b;
export default 'Math Module';

// main.js
import * as math from './math.js';
console.log('模块对象属性：');
for (const [k, v] of Object.entries(math)) {
  console.log(`  ${k}:`, v);
}
console.log('\nimport.meta 信息：');
console.log(`  当前模块 URL: ${import.meta.url}`);

九、总结

转自https://juejin.cn/post/7532425297150427171