ES6从入门到精通：模块化

夏梦春蝉2025-07-05 6:01

ES6 模块化基础概念

ES6 模块化是 JavaScript 官方标准，通过 import 和 export 语法实现代码拆分与复用。模块化特点包括：

每个文件是一个独立模块，作用域隔离。
支持静态分析，依赖关系在编译时确定。
输出的是值的引用（动态绑定）。

导出模块（export）

导出方式分为 命名导出 和 默认导出：

javascript 复制代码

// 命名导出（可多个）
export const name = 'Module';
export function calculate() { /* ... */ }

// 批量命名导出
const data = { value: 1 };
export { data };

// 默认导出（仅一个）
export default class MainComponent { /* ... */ }

导入模块（import）

根据导出方式选择对应导入语法：

javascript 复制代码

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

// 导入时重命名
import { data as dataset } from './module.js';

// 导入默认导出（无需花括号）
import MainComponent from './module.js';

// 混合导入
import DefaultExport, { namedExport } from './module.js';

// 动态导入（按需加载）
const module = await import('./module.js');

模块路径规则

相对路径 ：./ 或 ../ 开头，如 './utils.js'。
绝对路径：基于项目根目录的完整路径（需工具配置支持）。
第三方模块 ：直接写包名，如 'lodash'。

模块化高级用法

重新导出：在入口文件整合多个模块

javascript 复制代码

export { Button } from './components/Button.js';
export * as utils from './utils.js';

聚合模块 ：使用 import * as 导入全部命名导出

javascript 复制代码

import * as math from './math.js';
math.sum(1, 2);

注意事项

模块脚本需在 HTML 中声明 type="module"：
html 复制代码
```
<script type="module" src="main.js"></script>
```
浏览器环境需通过服务器访问（本地文件协议不支持 CORS）。
Node.js 需在 package.json 设置 "type": "module" 或使用 .mjs 后缀。

常见工具链支持

Babel：将 ES6 模块转译为 CommonJS 格式。
Webpack/Rollup：打包模块并处理依赖树。
ESLint：检查模块化语法规范。

通过系统化实践，ES6 模块化能显著提升代码可维护性和协作效率。