ES6模块是浏览器和Node.js原生支持的标准化方案，需用type="module"启用，强制静态分析、支持tree-shaking；导出分命名导出（多个）和默认导出（一个），导入路径须带扩展名或相对/绝对前缀，循环依赖返回已初始化对象而非执行结果。
JavaScript 模块化不是“要不要用”的问题，而是“怎么避免 ReferenceError 和命名污染”的实际需求。ES6 模块（import/export）是目前浏览器和 Node.js（v14.13+ 默认启用）都原生支持的方案，它强制静态分析、支持树摇（tree-shaking），比 CommonJS 更适合现代前端工程。
ES6 模块必须用 type="module" 才能运行
在 HTML 中直接使用 import 会报错：Uncaught SyntaxError: Cannot use import statement outside a module。这是因为脚本默认是“传统脚本”，不是模块。
解决办法只有一条：
- HTML 中引入脚本时加
type="module"属性 - 模块脚本自动启用严格模式、顶层
this为undefined、不共享全局作用域 - 不支持
require()或__dirname等 CommonJS 特性
<script type="module" src="./main.js"></script>
export 有两种写法：命名导出和默认导出
命名导出（export）适合导出多个值，如工具函数、常量；默认导出（export default）每个文件只能有一个，适合导出主类或主逻辑。
立即学习“Java免费学习笔记（深入）”；
常见错误：
- 把
export default function foo() {}写成export function foo() {}—— 后者是命名导出，导入时必须用{ foo } - 在同一个文件里混用
export default和export，没问题；但导入时语法不能搞混 - 动态值（如
export const now = Date.now()）导出的是初始快照，不是实时引用
// math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }
export default function multiply(a, b) { return a * b; }
<p>// main.js
import multiply, { PI, add } from './math.js'; // 默认导出不加花括号，命名导出加
import 路径必须带扩展名或以 /、./、../ 开头
ES6 模块规范要求导入路径是“明确的字符串字面量”，不允许省略扩展名（不像 Node.js 的 require() 会自动尝试 .js、.json）。
典型报错：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain" —— 很可能是因为路径没写对，服务器返回了 404 页面文本。
- 浏览器中路径必须是相对（
./utils.js）、绝对（/src/index.js）或完整 URL（https://cdn.example.com/lib.js） - 不能写
import { fn } from 'utils'（无扩展名 + 无路径前缀 → 解析失败） - Vite / Webpack 等构建工具可以配置别名，但那是构建时行为，不影响原生模块解析逻辑
循环依赖下，ES6 模块返回的是“已初始化对象”，不是“执行完成的结果”
如果 A.js 导入 B.js，而 B.js 又导入 A.js，ES6 模块不会报错，但变量可能为 undefined —— 因为导出对象在模块执行前就已创建，后续赋值才发生。
这和 CommonJS 的“导出即执行结果”不同，容易引发静默 bug。
- 避免在模块顶层直接读取对方导出的变量，改用函数封装访问逻辑
- 优先用默认导出类/对象，再在实例方法中调用对方模块，而不是在顶层
import后立刻使用 - 调试时可在控制台打印
import.meta.url确认当前模块加载路径是否符合预期
模块化真正难的不是语法，是理解“静态解析”和“执行时机”的分离——比如 export 不等于“此刻的值”，而是“这个绑定将来会被赋什么”。
