JavaScript模块是运行时独立作用域单元,import/export须在顶层静态声明且仅限模块环境;动态导入用await import();命名导出需解构导入,默认导出可重命名;HTML中需type="module"且路径带扩展名。

JavaScript 模块不是“语法糖”,而是运行时真实存在的独立作用域单元;import 和 export 不能在普通脚本中随意调用,必须明确声明为模块。
为什么 import 放在顶部且不能动态执行
import 是静态声明:解析阶段就确定依赖关系,不支持条件导入或运行时拼接路径。浏览器和打包工具(如 Webpack、Vite)都依赖这个特性做 tree-shaking 和预加载。
- 错误写法:
if (cond) import('./utils.js')→ 会报Unexpected token 'import' - 正确替代:
const utils = await import('./utils.js')(这是动态import(),返回 Promise,属于函数调用,不是声明) -
import必须位于模块顶层,不能嵌套在函数、条件或循环中
export 的三种常见形式及对应 import 写法
导出方式决定导入语法,不匹配就会报 undefined 或 is not exported 错误。
- 命名导出(named export):
export const foo = 1; export function bar() {}→ 导入必须用对应名:import { foo, bar } from './module.js' - 默认导出(default export):
export default function() {}或export default class {}→ 导入可自定义名:import myFunc from './module.js'(注意无大括号) - 混合导出允许同时存在,默认导出 + 若干命名导出;但一个模块最多一个
export default
如何让 HTML 中的 正确加载模块
普通 是 script 模式,import/export 无效;必须显式声明 type="module",且模块脚本天然是 defer 行为。
立即学习“Java免费学习笔记(深入)”;
- 正确写法:
- 相对路径必须带扩展名(如
./utils.js),不能省略为./utils(Node.js 允许,浏览器模块不支持) - 模块路径是 URL,不支持 Node.js 的包名自动解析(如
import _ from 'lodash'在纯浏览器中会 404;需用构建工具或 CDN 显式指定完整路径)
模块作用域的边界很硬:每个 .js 文件默认不是模块,加了 type="module" 或被其他模块 import 才激活;没处理好这点,export 就像没写一样,而 import 会直接报错退出。











