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);默认导出可任意命名,且一个模块只能有一个。常见误写是把两者混用或忽略大括号:
立即学习“Java免费学习笔记(深入)”;
/* 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'。开发阶段建议统一用完整路径,避免上线后因构建工具行为差异引发问题。











