JavaScript模块不是语法糖,而是需严格遵循export/import规则、在模块环境下执行的代码组织机制;默认脚本非模块,须通过type="module"或Node.js的"type":"module"启用,强制作用域隔离、显式依赖和静态路径。

JavaScript 模块不是语法糖,而是有明确规范、运行时行为和加载约束的代码组织机制——不遵循 export/import 规则,或在不支持模块环境里强行使用,会直接报错。
模块本质是带作用域边界和显式依赖声明的脚本
一个 .js 文件默认不是模块;只有被当作 type="module" 加载,或在 ES 模块上下文(如 Node.js 的 "type": "module")中执行,才启用模块系统。它强制隔离作用域(没有自动挂到 window)、禁止顶层 var 变量提升污染、要求所有依赖必须显式 import。
-
export不是“暴露变量”,而是声明该绑定可被其他模块读取;一旦导出,其值是实时绑定(非拷贝),修改源模块内值,导入处也会反映 -
import必须在顶层(不能在函数或条件里),且路径必须是字符串字面量(不能拼接变量) - CommonJS 的
require()和 ESM 的import互不兼容;Node.js 中混用需靠.mjs扩展名或"type": "module"明确区分
浏览器里用 import 前必须加 type="module"
直接写 会按传统脚本执行,import 报 Uncaught SyntaxError: Cannot use import statement outside a module。
- 正确写法:
- 此时
main.js内可写import { foo } from './utils.js';,但路径必须带扩展名(./utils.js✅,./utils❌) - 模块脚本默认是
defer行为:不会阻塞 HTML 解析,且按顺序执行
export default 和命名导出不能混用同个 import
常见错误是以为 import utils from './utils.js' 能同时拿到默认导出和命名导出——不行。默认导出和命名导出是两种独立机制。
立即学习“Java免费学习笔记(深入)”;
- 如果
utils.js同时写了export default function() {}和export const x = 1;: - 要导入默认导出:
import utils from './utils.js'; - 要导入命名导出:
import { x } from './utils.js'; - 要全部导入:
import utils, { x } from './utils.js';(注意顺序:默认导出在前,大括号在后) - 别写
import * as utils from './utils.js';试图获取默认导出——它只收命名导出,utils.default才是默认值
Node.js 中启用 ESM 需手动配置,且 __dirname 不可用
Node.js 默认用 CommonJS,开 ESM 不只是改文件后缀那么简单。
- 方式一:文件名用
.mjs(如index.mjs),直接运行node index.mjs - 方式二:在
package.json加"type": "module",此后所有.js都按 ESM 处理 - ESM 下没有
__dirname和__filename;要用import { fileURLToPath } from 'url';+const __dirname = path.dirname(fileURLToPath(import.meta.url)); - 动态导入可用
await import('./config.js'),但这是 Promise,不能用于条件加载逻辑外的静态依赖
模块系统的核心约束其实就三条:显式声明、静态分析、作用域隔离。绕开任何一条,都会在加载阶段失败——不是运行时报错,是根本进不了执行环节。











