隨著 JavaScript 向現(xiàn)代化發(fā)展，模塊化編程成為大型項(xiàng)目的基石。ES6 引入了原生模塊系統(tǒng)（ES Modules, ESM），為開發(fā)者提供了更加高效、規(guī)范和可優(yōu)化的模塊管理方式。

本文將系統(tǒng)講解 ES6 模塊的核心機(jī)制，并重點(diǎn)介紹 import.meta 以及模塊對(duì)象的結(jié)構(gòu)和用法，幫助你全面理解 ESM 在實(shí)踐中的應(yīng)用。

一、ES6 模塊核心特性

1. 靜態(tài)結(jié)構(gòu)（Static Structure）

ES6 模塊在 編譯階段 即確定模塊依賴，便于構(gòu)建工具進(jìn)行優(yōu)化（如 Tree-shaking）。

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

相比之下，CommonJS 使用 require() 是運(yùn)行時(shí)動(dòng)態(tài)加載的，不利于靜態(tài)分析。

2. 模塊作用域隔離

每個(gè)模塊都有自己的作用域，定義的變量不會(huì)污染全局，也不會(huì)影響其他模塊。

3. 導(dǎo)出方式：命名導(dǎo)出與默認(rèn)導(dǎo)出

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

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

二、模塊加載機(jī)制簡析

1. 瀏覽器中：

• 通過 <script type="module"> 加載；
• 模塊腳本默認(rèn)嚴(yán)格模式；
• 同源策略更嚴(yán)格（默認(rèn)啟用 CORS）；
• 模塊異步加載，不阻塞主線程；
• 每個(gè)模塊只會(huì)被加載和執(zhí)行一次（即使被多次引用）。

2. Node.js 中：

• 啟用 .mjs 后綴，或設(shè)置 package.json 中 "type": "module"；
• 使用文件路徑作為模塊標(biāo)識(shí)；
• 默認(rèn)禁用 CommonJS 的全局變量（如 __dirname），推薦使用 import.meta.url。

三、模塊對(duì)象結(jié)構(gòu)解析

當(dāng)你使用 import * as mod 導(dǎo)入模塊時(shí)，得到的是一個(gè)模塊對(duì)象，它包含了該模塊導(dǎo)出的所有綁定。

// 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. 模塊對(duì)象的特點(diǎn)：

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（綁定生效）

四、如何遍歷模塊對(duì)象

你可以使用 Object.keys 或 Object.entries 遍歷模塊對(duì)象的所有導(dǎo)出成員：

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：模塊元信息對(duì)象

1. import.meta 是什么？

它是一個(gè)由運(yùn)行時(shí)自動(dòng)填充的模塊元信息對(duì)象，包含當(dāng)前模塊的上下文信息。

console.log(import.meta.url); // 模塊的絕對(duì) URL

輸出示例：

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

2. 瀏覽器與 Node.js 中的差異：

// Vite 自動(dòng)注入
if (import.meta.env.DEV) {
  console.log('開發(fā)模式');
}

3. 與模塊對(duì)象的區(qū)別：

六、動(dòng)態(tài)導(dǎo)入與頂層 await

1. import()：動(dòng)態(tài)導(dǎo)入模塊

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

特點(diǎn)：

• 返回 Promise；
• 可用于懶加載、按需加載、路由分包；
• 可用于條件導(dǎo)入模塊。

2. 頂層 await

在模塊中允許在頂層使用 await（無需函數(shù)封裝）：

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

?? 僅適用于 ESM 模塊，不支持普通 <script> 腳本。

七、模塊循環(huán)引用（Circular Import）

ES6 模塊支持循環(huán)引用，但不建議過度依賴。

// 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);

循環(huán)引用的變量可能為 undefined，ESM 會(huì)保證模塊執(zhí)行順序正確，但需謹(jǐn)慎使用。

八、綜合實(shí)踐示例

// 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('模塊對(duì)象屬性：');
for (const [k, v] of Object.entries(math)) {
  console.log(`  ${k}:`, v);
}
console.log('\nimport.meta 信息：');
console.log(`  當(dāng)前模塊 URL: ${import.meta.url}`);

九、總結(jié)

轉(zhuǎn)自https://juejin.cn/post/7532425297150427171