ES 模块：JavaScript 模块化的标准方案

ES 模块：JavaScript 模块化的标准方案

什么是 ES 模块？

ES 模块（ES Modules，简称 ESM）是 ECMAScript 2015（ES6）引入的官方模块化规范。

ES 模块 vs CommonJS

基本用法

导出

// utils.js // 命名导出 export const PI = 3.14159; export function add(a, b) { return a + b; } // 默认导出 export default function greet(name) { return `Hello, ${name}!`; }

导入

// main.js // 导入命名导出 import { PI, add } from './utils.js'; // 导入默认导出 import greet from './utils.js'; // 重命名导入 import { add as sum } from './utils.js'; // 导入所有 import * as utils from './utils.js';

动态导入

// 动态加载模块 async function loadModule() { const module = await import('./utils.js'); console.log(module.add(2, 3)); } // 条件加载 if (condition) { import('./feature.js').then(module => { module.init(); }); }

模块解析

文件扩展名

// 必须包含扩展名 import { func } from './utils.js'; // 不能省略 import { func } from './utils'; // ❌

绝对路径

// 从 node_modules 导入 import React from 'react'; // 绝对路径导入 import { utils } from '/path/to/utils.js';

模块作用域

// 模块顶层变量不会污染全局作用域 const privateVar = 'secret'; // 只有导出的内容才能被外部访问 export const publicVar = 'public';

循环依赖

// a.js import { b } from './b.js'; export const a = 'a'; // b.js import { a } from './a.js'; export const b = 'b';

在浏览器中使用

<script type="module" src="main.js"></script>

// main.js import { greet } from './utils.js'; console.log(greet('World'));

在 Node.js 中使用

{ "type": "module" }

// package.json 设置后可以使用 ESM import fs from 'fs'; import path from 'path';

模块打包

Webpack 配置

module.exports = { entry: './src/main.js', output: { filename: 'bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' } ] } };

Rollup 配置

export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'esm' } };

最佳实践

1. 保持导出简洁

// ❌ 不好：导出过多 export const a = 1; export const b = 2; export const c = 3; // ✅ 好：按需导出 export { a, b } from './constants.js'; export { default as c } from './c.js';

2. 使用命名导出

// ✅ 推荐：命名导出便于 tree-shaking export function util1() {} export function util2() {}

3. 避免循环依赖

// ❌ 不好：循环依赖 // a.js import { b } from './b.js'; // b.js import { a } from './a.js';

总结

ES 模块为 JavaScript 提供了标准化的模块化方案：

1. 静态分析：支持 tree-shaking
2. 异步加载：更好的性能优化
3. 标准规范：跨平台兼容
4. 清晰语义：明确的导入导出语法

掌握 ES 模块是现代前端开发的必备技能。