JavaScript模块是带export/import的独立文件,具有静态解析、独立作用域、顶层this为undefined等特性,需显式声明type="module",支持命名导出和默认导出,路径必须带扩展名或相对前缀,不支持动态export和裸包名直接导入。

JavaScript 模块就是带 export 和 import 的独立文件
它不是语法糖,也不是运行时拼接的字符串——模块在加载时就确定依赖关系,有独立作用域、顶层 this 为 undefined、不自动提升 var 声明。浏览器和 Node.js 都原生支持,但必须显式声明类型: 或 "type": "module" 在 package.json 中。
export 有命名导出和默认导出两种写法,不能混用同一变量
命名导出适合导出多个值(函数、类、常量),导入时必须用大括号;默认导出每个模块只能有一个,导入时可自定义名称,无需大括号。常见错误是试图对同一个标识符既命名导出又默认导出:
export const utils = { foo: 1 };
export default utils; // ✅ 合法:导出的是两个不同绑定
// export utils; // ❌ 语法错误:没有 default 关键字
-
export function foo() {}→ 导入需import { foo } from './x.js' -
export default function() {}→ 导入可写import bar from './x.js'(bar是任意名) -
export { foo as bar }可重命名导出,import { bar } from './x.js' - 动态
export不被支持,所有导出必须是顶层静态声明
import 路径必须带扩展名或以 /、./、../ 开头
ESM 规范禁止省略扩展名(如 import './utils' 会报错),也不能用纯包名不加 node_modules 解析逻辑(除非用构建工具或 Node.js 的 exports 字段)。浏览器中路径解析基于当前 HTML 的 URL,Node.js 则按文件系统相对路径查找:
import { helper } from './helper.js'; // ✅ 必须 .js
import { api } from '../lib/api.mjs'; // ✅ 允许 .mjs
import React from 'react'; // ✅ 仅当有 package.json "exports" 或运行在支持 bare specifier 的环境(如 Deno、Vite)
- 不支持
import 'lodash'在原生浏览器脚本中直接使用 -
import('./dynamic.js')是动态导入,返回 Promise,可用于条件加载 - 路径别名(如
@/components)需构建工具(Vite、Webpack)配置,原生 ESM 不识别
Node.js 中启用模块需注意 type 字段和文件后缀冲突
如果 package.json 里写了 "type": "module",所有 .js 文件都被当作 ESM;反之,若没写,则只有 .mjs 是 ESM,.cjs 强制为 CommonJS。二者不能混用:import 不能在 .cjs 里写,require() 不能在 .mjs 里调用。
立即学习“Java免费学习笔记(深入)”;
- 错误示例:
package.json无type,但index.js写了import→ 报Cannot use import statement outside a module - 解决方式二选一:加
"type": "module",或把文件改成index.mjs -
__dirname和__filename在 ESM 中不可用,要用import.meta.url配合file://URL API
console.log 或 API 调用,就立刻暴露出来。











