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

ES 模块JavaScript 模块化的标准方案什么是 ES 模块ES 模块ES Modules简称 ESM是 ECMAScript 2015ES6引入的官方模块化规范。ES 模块 vs CommonJS特性CommonJSES Modules加载方式同步异步执行时机运行时编译时导出module.exportsexport导入require()import顶层 thismodule.exportsundefined基本用法导出// 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 typemodule srcmain.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 提供了标准化的模块化方案静态分析支持 tree-shaking异步加载更好的性能优化标准规范跨平台兼容清晰语义明确的导入导出语法掌握 ES 模块是现代前端开发的必备技能。