什么是模块_如何在javascript中导入导出代码【教程】

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' 能同时拿到默认导出和命名导出——不行。默认导出和命名导出是两种独立机制。

• 如果 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，不能用于条件加载逻辑外的静态依赖

模块系统的核心约束其实就三条：显式声明、静态分析、作用域隔离。绕开任何一条，都会在加载阶段失败——不是运行时报错，是根本进不了执行环节。