ES6模块是静态编译期确定依赖的语法结构，import必须位于顶层作用域以构建模块图；动态导入需用import()函数；路径须为显式相对/绝对URL或完整URL，不支持裸模块名和file://协议。
ES6 模块（import/export）不是运行时动态加载的脚本拼接，而是**静态编译期确定依赖关系的语法结构**；浏览器或打包工具必须在执行前解析完所有 import 语句，因此不能用变量、条件或函数调用来控制导入路径。
为什么 import 必须写在顶层作用域
因为模块图构建发生在代码执行之前。JS 引擎需要一次性扫描全部 import 语句，生成模块依赖树。一旦放进 if 或函数里，就破坏了这种静态可分析性。
常见错误现象：
-
Uncaught SyntaxError: Cannot use import statement outside a module（没加type="module"） -
Uncaught SyntaxError: Unexpected token 'if'（import写在if块里） Uncaught SyntaxError: Cannot use import statement inside a function
正确做法：
立即学习“Java免费学习笔记（深入）”；
- HTML 中引入脚本时加上
type="module"：<script type="module" src="./main.js"></script>
-
import只出现在文件最外层（顶层作用域），不能嵌套 - 动态导入用
import()函数（返回 Promise），它才是运行时可条件调用的
export 的三种写法和对应 import 方式
导出方式决定导入时能否重命名、是否必须解构、是否支持默认导出。混用会导致 undefined 或 unexpected token 错误。
示例对比：
// math.js
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export default function multiply(a, b) { return a * b; }对应导入方式：
- 命名导出必须用大括号：
import { PI, add } from './math.js'; - 默认导出不加括号，可任意重命名：
import multiply from './math.js';或import calc from './math.js'; - 同时导入命名 + 默认：
import multiply, { PI, add } from './math.js'; - 全部导入为命名空间对象：
import * as math from './math.js';→math.PI,math.default(2, 3)
路径必须是相对或绝对 URL，不能省略扩展名
ES6 模块规范要求 import 路径是**有效的模块说明符（module specifier）**，浏览器不支持 Node.js 那套自动解析规则（如省略 .js、查找 index.js、读取 package.json 的 main 字段）。
常见错误：
-
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain".（服务器没返回application/javascript） -
Failed to load module script: The server responded with a non-JavaScript MIME type.（路径指向 HTML 或 404） -
TypeError: Failed to resolve module specifier "utils"（没写./utils.js，用了裸模块名）
可行路径写法：
-
import { foo } from './utils.js';（推荐：显式后缀） -
import { foo } from '/src/utils.js';（绝对路径，从根开始） -
import { foo } from 'https://cdn.example.com/lib.js';（完整 URL）
注意：Node.js 环境下可通过 "type": "module" 在 package.json 中启用 ESM，但依然不支持裸模块名，除非配合 import maps 或打包工具。
开发中绕不开的两个现实约束
纯浏览器环境直接使用 ES6 模块，会遇到两个硬限制：
- 无法直接导入
node_modules下的包（比如import _ from 'lodash'会失败） - 无法在本地
file://协议下运行（浏览器禁止跨源请求，会报 CORS 错误）
所以实际项目中：
- 要么用
import map显式映射裸模块名到 URL（仅现代浏览器支持） - 要么用 Vite / Webpack / esbuild 等工具打包，把模块转成可执行格式并注入路径解析逻辑
- 本地开发务必起一个 HTTP 服务（
npx serve、vite、python3 -m http.server）
模块不是“即插即用”的胶水，它是语言级的依赖契约——写错路径、搞混导出类型、忽略协议限制，都会在加载阶段立刻失败，没有回退机制。
