JavaScript模块化详解：import与export用法解析

JavaScript模块化已成现代开发标配，但真正难点不在“用不用”，而在“怎么用对”——ES6的import/export在浏览器和Node.js中行为迥异：HTML需显式添加type="module"，Node.js则依赖.mjs后缀或package.json中的"type":"module"配置；default与named导出语法严格对应不同导入形式，混用即报错；动态import()以Promise形式实现按需加载，突破静态导入限制；而最易踩坑的是环境差异——同一段代码在Vite、file://协议或Node.js中可能因模块系统不一致而404、SyntaxError或兼容性崩溃。掌握这些细节，才能避开教程照搬的陷阱，让模块化真正落地可靠。

JavaScript 模块化不是“要不要用”的问题，而是“怎么用对”的问题；ES6 的 import 和 export 在浏览器和 Node.js 中行为不一致，直接照抄教程代码大概率报错。

为什么 import 在 HTML 里直接写会报 “SyntaxError: Cannot use import statement outside a module”？

因为浏览器默认把脚本当作传统脚本（script）执行，不是模块（module）。必须显式声明：

• HTML 中引入 JS 时加 type="module"：

  <script type="module" src="main.js"></script>

• 没有 type="module"，哪怕文件里只有一行 import，也会被拒绝解析
• Node.js 默认也不启用 ES 模块 —— 需要文件后缀为 .mjs，或在 package.json 中设置 "type": "module"
• CommonJS 的 require() 在纯 ES 模块环境里完全不可用，反之亦然

export 有 default 和 named 两种，混用时容易搞反导入写法

导出方式决定导入语法，不能凭感觉写：

• export default function foo() {} → 导入时名字任意：import anything from './foo.js'
• export function bar() {} 或 export const x = 1 → 必须用大括号且名字严格匹配：import { bar, x } from './foo.js'
• 想同时支持两种？可以：export default function foo() {} + export const version = '1.0'，然后 import foo, { version } from './foo.js'
• 注意：export default 只能有一个；named export 可以多个，但不能重复命名

动态 import() 是函数，不是关键字，能解决按需加载和循环依赖

静态 import 必须在顶层、不能写在 if 里；而 import() 返回 Promise，适合运行时控制：

• 按需加载组件：const { Modal } = await import('./ui/Modal.js')
• 兼容旧代码：在 CommonJS 环境中无法用静态 import，但可尝试 import('./utils.js').then(...)
• 避免启动时加载全部模块，减少首屏 JS 体积
• 注意：import() 的路径必须是字符串字面量或模板字符串（如 `./${name}.js`），不能是拼接的变量

最常被忽略的是环境差异 —— 同一份 import/export 代码，在 Vite 开发服务器下跑得通，放到原生 file:// 协议打开就 404；在 Node.js v18+ 启用 type: module 后，又可能因 CJS 依赖（比如某些 npm 包）报错。别急着改代码，先确认执行上下文到底是什么模块系统。

以上就是《JavaScript模块化详解：import与export用法解析》的详细内容，更多关于的资料请关注golang学习网公众号！