当前位置：首页 > 文章列表 > 文章 > 前端 > 模块化是什么？如何导入导出JS模块？

模块化是什么？如何导入导出JS模块？

2026-02-02 08:27:40 0浏览收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《模块化是什么？如何导入导出JS模块？》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

JavaScript模块化关键在正确使用ESM与CommonJS：二者不兼容，混用报错；ESM的import须顶层声明，动态加载需用import()；export default与具名export导入方式严格对应；Node.js中ESM需启用"type":"module"且路径必须带后缀。

模块化是什么_如何导入导出JavaScript模块【教程】

JavaScript 模块化不是“要不要用”的问题，而是“怎么用对”的问题——ESM（import/export）和 CommonJS（require/module.exports）本质不兼容，混用会直接报错，比如 ReferenceError: require is not defined 或 Cannot use import statement outside a module。

ESM 的 `import` 必须写在顶层作用域

这是 ESM 最常踩的坑：不能在条件语句、函数内部或 try/catch 里写 import。浏览器和 Node.js（启用 "type": "module" 时）都强制执行这一限制。

常见错误场景：

想根据环境动态加载模块，写了 if (DEV) { import('./debug.js') } → 报语法错误
封装一个工具函数，内部调用 import('./utils.js') → 不合法，必须用 import() 动态导入

正确做法是改用动态 import()（返回 Promise）：

if (DEV) {
  import('./debug.js').then(({ init }) => init())
}

注意：import() 是函数调用，不是声明，可以出现在任意位置，但加载结果需 await 或 .then 处理。

`export default` 和具名 `export` 导入方式不同

导出类型决定导入写法，写错会导致变量为 undefined，但不会报错，极难排查。

比如模块 math.js 写了：

export default function add(a, b) { return a + b }
export const PI = 3.14

对应导入必须严格匹配：

import add from './math.js' → 正确获取默认导出
import { PI } from './math.js' → 正确获取具名导出
import { add } from './math.js' → ❌ add 是 undefined，因为它是 default，不是具名
import math from './math.js' → ✅ math 就是那个 add 函数

如果同时需要默认和具名，可合并写：import add, { PI } from './math.js'。

Node.js 中 ESM 需显式启用且路径必须带后缀

Node.js 默认把 .js 文件当 CommonJS 执行，即使写了 export 也会报错。启用 ESM 有两种等效方式：

在 package.json 中加 "type": "module"
用 node --experimental-modules index.mjs（旧版）或直接运行 .mjs 文件（推荐）

更重要的是：ESM 下 import 路径必须是完整说明，不能省略扩展名：

import { foo } from './utils' → ❌ 报错 ERR_MODULE_NOT_FOUND
import { foo } from './utils.js' → ✅
import { foo } from './utils.mjs' → ✅

这个限制没有例外，连 node_modules 里的包也一样——除非该包在 package.json 中声明了 "exports" 字段并配置了默认入口。

模块化的真正复杂点不在语法，而在于环境判断和加载时机：浏览器原生支持 ESM，但不支持 require；Node.js 支持两者但互斥；打包工具（如 Vite、Webpack）会做转换，但开发时若直连浏览器或用 node --run，就绕不开这些边界条件。别依赖“它应该能跑”，先确认执行上下文再选语法。

好了，本文到此结束，带大家了解了《模块化是什么？如何导入导出JS模块？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！