17370845950

JavaScript模块系统分浏览器ES模块和Node.js双机制：Node需.mjs后缀或"module"类型声明才支持import/export，CommonJS仍广泛使用但二者不可混用。

JavaScript 的模块系统不是“一种东西”，而是分环境、分标准的两套机制：浏览器用 import/export（ES 模块），Node.js 从 v12 起默认启用 ES 模块，但需注意文件扩展名或 type 字段；CommonJS（require/module.exports）仍在大量旧项目和部分 Node 场景中使用，二者不能混写。

ES 模块必须用 .mjs 或 type: "module"

在 Node.js 中直接写 import 会报错：Cannot use import statement outside a module。这是因为 CommonJS 是默认模式。解决方式只有两个：

• 把文件后缀改成 .mjs（如 main.mjs），Node 会自动按 ES 模块加载
• 在 package.json 顶层加 "type": "module"，此后所有 .js 文件都按 ES 模块解析

二者二选一即可，不要同时用。没配 type 又没改后缀，import 就是语法错误，不是代码写错了，是环境不认。

export 有命名导出和默认导出两种形式

命名导出必须用对应名字导入，不能重命名（除非用 as）；默认导出可任意命名，且一个模块只能有一个。常见误写是把两者混用或忽略大括号：

/* math.js */
export const add = (a, b) => a + b;
export function multiply(a, b) { return a * b; }
export default function subtract(a, b) { return a - b; }

/* main.js */
import subtract, { add, multiply } from './math.js'; // 正确：默认导出无大括号，命名导出带大括号
import { add as sum } from './math.js'; // 重命名合法
import subtract from './math.js'; // ✅ 只导入默认导出，可以
import { subtract } from './math.js'; // ❌ 报错：subtract 是默认导出，不是命名导出

动态 import() 是函数，返回 Promise

静态 import 必须在顶层，不能写在条件里；想按需加载、拆包、或处理运行时路径，得用动态 import()：

• 它不是声明，是调用，所以支持变量拼接路径：import(`./locales/${lang}.js`)
• 返回 Promise，必须 await 或 .then() 处理结果
• 不能在 import.meta.url 外部用相对路径别名（如 import('@/utils')），那是打包工具（Vite/Webpack）的扩展，原生不支持

async function loadConfig() {
  const mod = await import('./config.js');
  return mod.default;
}

浏览器中 import 路径必须带扩展名或斜杠

浏览器原生 ES 模块不支持 Node 那套“自动补 .js”或“查 index.js”逻辑。下面这些都会 404：

• import { foo } from './utils' → 缺扩展名，报错
• import { foo } from './utils/index' → 同样不行
• import { foo } from 'lodash' → 不支持裸模块说明符（bare specifier），除非用 importmap

正确写法只有：import { foo } from './utils.js' 或 import { foo } from './utils/index.js'。开发阶段建议统一用完整路径，避免上线后因构建工具行为差异引