JavaScript 模塊化語法 import、export 詳解

1. 為什么需要模塊化？

在 JavaScript 早期，所有代碼都是寫在一個 全局作用域 中，這樣做的問題是：

• 變量污染：所有變量、函數(shù)都是全局的，容易互相干擾。
• 文件依賴管理困難：多個 JS 文件之間的依賴關系混亂，難以維護。
• 代碼復用困難：無法方便地拆分和復用代碼。

為了解決這些問題，模塊化 方案應運而生。

2. JavaScript 模塊化的發(fā)展

2.1 早期的模塊化方案

在 ES6 之前，JS 主要依賴以下方案進行模塊化：

• IIFE（立即執(zhí)行函數(shù)表達式）：用函數(shù)封裝代碼，避免污染全局變量。
• CommonJS（Node.js 使用）：
  • require() 引入模塊。
  • module.exports 導出模塊。
• AMD（Asynchronous Module Definition）：
  • 主要用于瀏覽器端，使用 define() 和 require() 加載模塊（如 RequireJS）。
• UMD（Universal Module Definition）：
  • 兼容 CommonJS 和 AMD，用于同時支持瀏覽器和 Node.js。

但這些方案都有一定的缺陷，比如 CommonJS 是同步加載的，不適用于瀏覽器端，AMD 又顯得過于復雜。

3. ES6 模塊化（ESM）—— import & export

ES6 在 2015 年引入了 import 和 export 關鍵字，成為 JavaScript 官方的模塊化方案（ECMAScript Modules, ESM）。

3.1 基本用法

ES6 模塊化使用 export 導出模塊，import 導入模塊。

（1）導出模塊 (export)

在一個 JavaScript 文件中，我們可以使用 export 關鍵字導出變量、函數(shù)或類。

? 導出方式 1：命名導出（Named Export）

// math.js
export const PI = 3.14159;
export function add(a, b) {
    return a + b;
}
export class Calculator {
    multiply(a, b) {
        return a * b;
    }
}

? 導出方式 2：默認導出（Default Export）

// greet.js
export default function greet(name) {
    return `Hello, ${name}!`;
}

（2）導入模塊 (import)

? 導入方式 1：導入命名導出

import { PI, add, Calculator } from './math.js';
console.log(PI); // 3.14159
console.log(add(2, 3)); // 5
const calc = new Calculator();
console.log(calc.multiply(2, 3)); // 6

? 導入方式 2：導入默認導出

import greet from './greet.js';
console.log(greet('Alice')); // Hello, Alice!

? 導入方式 3：重命名導入

import { add as sum } from './math.js';
console.log(sum(2, 3)); // 5

? 導入方式 4：整體導入

import * as MathUtils from './math.js';
console.log(MathUtils.PI); // 3.14159
console.log(MathUtils.add(2, 3)); // 5

4. export 詳解

4.1 命名導出（Named Export）

命名導出可以導出多個變量、函數(shù)或類：

export const name = 'Alice';
export function greet() {
    return 'Hello!';
}
export class User {}

導入時需要使用 相同的名稱：

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

4.2 默認導出（Default Export）

默認導出通常用于 導出單個模塊，例如：

export default function greet() {
    return 'Hello!';
}

導入時可以使用 任何名稱：

import myGreet from './module.js';
console.log(myGreet()); // Hello!

4.3 默認導出 + 命名導出

export default function main() {
    console.log('Default function');
}
export const version = '1.0';
export function helper() {
    console.log('Helper function');
}

導入：

import main, { version, helper } from './module.js';
main(); // Default function
console.log(version); // 1.0
helper(); // Helper function

5. import 詳解

5.1 import 只能在模塊頂級使用

import 語句不能放在 條件語句或函數(shù)內(nèi)部，否則會報錯：

if (true) {
    import { add } from './math.js'; // ? 錯誤
}

正確用法：

import { add } from './math.js';
if (true) {
    console.log(add(2, 3));
}

5.2 動態(tài)導入 import()

ES2020 引入了 動態(tài)導入，適用于 按需加載（懶加載）：

if (someCondition) {
    import('./math.js').then(({ add }) => {
        console.log(add(2, 3));
    });
}

也可以用 async/await：

async function loadMath() {
    const math = await import('./math.js');
    console.log(math.add(2, 3));
}
loadMath();

6. ES6 模塊 vs CommonJS

特性ES6 模塊（ESM）CommonJS（CJS）關鍵字import / exportrequire() / module.exports運行方式預解析（靜態(tài)導入）運行時（動態(tài)導入）是否支持頂層導入? 是? 否是否支持異步導入? import()? 僅同步適用環(huán)境瀏覽器 & Node.js (ESM)Node.js (CJS)默認方式適用于瀏覽器和前端Node.js 默認方式

7. 瀏覽器中如何使用 import / export

7.1 直接使用 <script type="module">

<script type="module">
    import { add } from './math.js';
    console.log(add(2, 3));
</script>

7.2 通過 Webpack / Vite / Rollup

現(xiàn)代前端工具（如 Webpack）可以 打包 ES6 模塊 以支持更舊的瀏覽器：

npm install webpack

8. 結論

• ES6 模塊化 (import / export) 是 JavaScript 官方推薦的模塊化方案，解決了 代碼復用、作用域管理、依賴管理 等問題。
• 默認導出 (export default) 適用于導出單個對象或函數(shù)。
• 命名導出 (export {}) 適用于導出多個變量、函數(shù)或類。
• 動態(tài)導入 (import()) 可實現(xiàn) 懶加載，適用于按需加載模塊。
• ESM 和 CommonJS 不兼容，但 Node.js 也開始支持 ESM（.mjs 文件）。

最新評論