一、ES6模块化的核心概念

1. 模块化的基本规则

二、export的用法

1. 命名导出（Named Export）

示例：

2. 默认导出（Default Export）

示例：

默认导出函数或类：

3. 导出语句的统一声明

示例：

三、import的用法

1. 按需导入命名成员

2. 导入默认成员

3. 同时导入命名成员和默认成员

4. 导入整个模块

5. 重命名导入成员

四、动态导入（Dynamic Import）

1. 动态加载模块

示例：

2. 动态导入的应用场景

五、注意事项

1. 模块环境配置

2. 常见错误

六、总结

一、ES6模块化的核心概念

1. 模块化的基本规则

一次性加载：每个模块只会被加载一次，后续请求直接从内存中获取。
局部作用域：模块内的变量、函数仅在模块内部生效，不会污染全局作用域。
导出（export）：通过export关键字暴露模块中的变量、函数或类。
导入（import）：通过import关键字从其他模块中导入已导出的内容。

二、`export`的用法

1. 命名导出（Named Export）

命名导出允许在模块中导出多个成员，导入时需使用相同的名称。

示例：

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;// main.js
import { add, subtract } from './math.js';
console.log(add(2, 3)); // 输出: 5
console.log(subtract(5, 2)); // 输出: 3

批量导出：

// utils.js
const pi = 3.14;
function multiply(a, b) { return a * b; }export { pi, multiply };// main.js
import { pi, multiply } from './utils.js';
console.log(multiply(pi, 2)); // 输出: 6.28

2. 默认导出（Default Export）

每个模块只能有一个默认导出，导入时可以使用任意名称。

示例：

// user.js
const user = { name: 'Alice', age: 25 };
export default user;// main.js
import myUser from './user.js';
console.log(myUser.name); // 输出: Alice

默认导出函数或类：

// calculator.js
export default function add(a, b) { return a + b; }// main.js
import sum from './calculator.js';
console.log(sum(3, 4)); // 输出: 7

3. 导出语句的统一声明

可以在模块末尾集中导出所有成员。

示例：

// tools.js
const base = 10;
function square(n) { return n * n; }export { base, square };// main.js
import { base, square } from './tools.js';
console.log(square(base)); // 输出: 100

三、`import`的用法

1. 按需导入命名成员

导入模块中指定的命名导出。

import { add, subtract } from './math.js';
console.log(add(1, 2)); // 输出: 3

2. 导入默认成员

直接导入模块的默认导出。

import sum from './calculator.js';
console.log(sum(5, 5)); // 输出: 10

3. 同时导入命名成员和默认成员

import sum, { add, subtract } from './math.js';
console.log(sum(2, 3)); // 输出: 5
console.log(add(1, 1)); // 输出: 2

4. 导入整个模块

将模块的所有导出内容作为一个对象导入。

import * as math from './math.js';
console.log(math.add(2, 3)); // 输出: 5
console.log(math.subtract(5, 2)); // 输出: 3

5. 重命名导入成员

通过as关键字避免命名冲突。

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

四、动态导入（Dynamic Import）

1. 动态加载模块

import()返回一个Promise，适用于按需加载模块。

示例：

// 动态加载模块
import('./math.js').then(module => {console.log(module.add(2, 3)); // 输出: 5}).catch(error => console.error('加载失败:', error));// 使用async/await
const module = await import('./math.js');
console.log(module.add(2, 3)); // 输出: 5