ES6模块必须顶层import因静态解析需预建依赖图;动态导入用import();export分具名(绑定)和默认(值快照);浏览器需type="module"且本地启服务,Node需.mjs或"type":"module"。

JavaScript 模块化是把代码拆成独立、可复用、有作用域边界的文件;ES6 模块(import/export)是原生支持的静态模块系统,必须在编译时确定依赖关系,不能动态拼接模块名。
为什么 import 必须写在顶层,不能放在 if 或函数里?
因为 ES6 模块是“静态解析”的:浏览器或打包工具(如 Webpack、Vite)在加载脚本时就要分析所有 import 语句,提前构建依赖图。把它塞进条件逻辑里,会导致解析失败。
-
import出现在函数内 → 报错Cannot use import statement outside a module或Unexpected token 'import' - 真要条件加载?用
import()动态导入(返回 Promise),它是运行时行为,合法且常用 - 注意:
import()的参数必须是字符串字面量或模板字符串(如import(`./pages/${page}.js`)在某些构建工具中可能不被支持,Vite 支持,Webpack 需配置)
export 有哪几种写法?导出默认值和具名值有什么区别?
具名导出(export)和默认导出(export default)本质不同:前者导出的是绑定(binding),后者导出的是值(value)的引用快照;且一个模块只能有一个 default,但可以有多个具名导出。
- 具名导出:
export const foo = 1;、export function bar() {}、export { foo, bar }; - 默认导出:
export default function() {}或export default class {}或export default 42; - 导入时:具名导入必须用大括号
import { foo } from './mod.js';默认导入不用大括号import MyFunc from './mod.js'(名字可任意) - 混用时注意:默认导出 + 具名导出可以共存,但导入时要分开写,例如
import MyDefault, { namedA, namedB } from './mod.js'
为什么在浏览器中直接用 import 会报错 Cross-origin requests are not supported?
因为浏览器对 type="module" 脚本执行严格的 CORS 策略:即使本地双击打开 HTML 文件(file:// 协议),也会拒绝加载本地 import 的模块 —— 这不是 bug,是规范要求。
立即学习“Java免费学习笔记(深入)”;
- 解决办法只有两个:起一个本地服务器(如
npx serve、python3 -m http.server、Vite 的vite preview) - HTML 中 script 标签必须写
,否则import不生效 - Node.js 环境下需确保文件后缀是
.mjs,或package.json中设置了"type": "module",否则import会被当成语法错误
export const API_URL = 'https://api.example.com';
export function fetchData(id) {
return fetch(`${API_URL}/items/${id}`);
}
export default class DataService {
static async loadAll() {
return (await fetch(`${API_URL}/items`)).json();
}
}
模块路径必须带扩展名(./utils.js)或斜杠(./utils/),不能省略为 ./utils —— 这在 Node.js 14+ ESM 中是硬性要求,浏览器也一样。漏掉后缀是新手最常卡住的地方。











