javascript模块是什么_如何导入导出功能_技术教程

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 里调用。

错误示例：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