ES模块（ESM）是浏览器和现代Node.js原生支持的静态模块系统，与动态的CommonJS不兼容；需用import/export顶层声明，支持命名/默认/混合导出及动态导入，路径须为字面量且带扩展名或相对前缀。
JavaScript 模块化是把代码拆成独立、可复用、有作用域边界的文件单位，解决全局污染和依赖混乱问题。ES6（ECMAScript 2015）起原生支持 import / export，现在已是标准做法。
什么是 ES 模块（ESM）？和 CommonJS 有什么区别？
ES 模块是浏览器和现代 Node.js（v12+ 默认启用）原生支持的模块系统，静态分析、编译时确定依赖，不支持动态路径或运行时修改导出对象。CommonJS（require/module.exports）是 Node.js 早期方案，动态加载、运行时执行，两者不能混用（比如在 ESM 文件里写 require() 会报错 ReferenceError: require is not defined）。
关键差异：
-
export和import必须在顶层作用域（不能在if或函数内） -
export default每个文件最多一个；export命名导出可多个，导入时名字必须匹配（或用as重命名） - ESM 中
this在模块顶层是undefined，而 CommonJS 是当前模块对象 - Node.js 中启用 ESM 需满足任一条件：文件后缀为
.mjs，或package.json中设置"type": "module"
如何正确使用 export 导出变量、函数或类？
导出不是“发布”，只是标记哪些内容可以被其他模块访问。常见写法有三种：
javascript-typescript-typescript-scaffold
下载
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
立即学习“Java免费学习笔记（深入）”；
- 命名导出（Named Export）：
export const API_URL = 'https://api.example.com'; export function fetchData() { /* ... */ } export class User { /* ... */ }可批量导出：const a = 1; const b = 2; export { a, b }; - 默认导出（Default Export）：
export default function initApp() { /* ... */ } // 或 const router = new Router(); export default router;每个模块仅一个，默认导出不要求命名，导入时可自定义名称 - 混合导出：
export const VERSION = '1.0.0'; export default function main() { /* ... */ }注意：不能写export default const x = 1（语法错误），必须先声明再export default x或直接export default后跟表达式
如何用 import 加载模块？路径和语法要注意什么？
导入路径必须是字符串字面量（不能拼接变量），且需带扩展名或以 /、./、../ 开头（否则会被当作内置模块或包名）。常见形式：
- 导入默认导出：
import initApp from './app.js'; // 注意：没大括号
- 导入命名导出：
import { API_URL, fetchData } from './api.js'; - 全部导入为命名空间对象：
import * as api from './api.js'; console.log(api.API_URL);
- 只执行模块（无导入内容，用于副作用）：
import './polyfill.js';
- 动态导入（返回 Promise，可用于按需加载）：
const module = await import('./lazy.js');注意：动态导入可在条件语句或函数中使用，但依然要求路径是字符串字面量或模板字符串（如import(`./pages/${page}.js`)在构建工具支持下才安全）
常见报错及绕过陷阱
实际开发中最容易卡在这些地方：
-
Cannot use import statement outside a module：浏览器脚本没加type="module"属性，或 Node.js 没设"type": "module" -
Module not found：路径错误（漏掉./）、大小写不符（Linux/macOS 区分大小写）、扩展名缺失（ESM 不自动补.js） -
export 'xxx' was not found in 'yyy'：导出名拼写错误、试图从默认导出文件里解构命名导出（比如import { foo } from './bar.js'，但 bar.js 只有export default） - 在 HTML 中引入 ESM 脚本必须加
type="module"：<script type="module" src="./main.js"></script>
否则当作传统脚本执行，import语法直接报错 - 循环依赖时，ESM 返回的是实时绑定（live binding）的引用，不是值拷贝 —— 如果 A 导入 B，B 又导入 A，A 中未初始化的
export let x在 B 中读取会是undefined，直到 A 执行完赋值
模块路径解析、Tree-shaking 效果、与打包工具（如 Vite/Webpack）的协作机制，都依赖于静态 import/export 结构。一旦开始用 ESM，就别回头混写 require，否则构建和运行时行为会不可预测。
