JavaScript模块化开发详解教程

JavaScript模块化本质上是一场运行时环境的适配战，而非单纯的语法学习：浏览器要求type="module"和URL式路径，Node.js依赖"type":"module"或.mjs后缀，ESM与CommonJS严格隔离，命名导出与默认导出必须精准匹配，而打包工具虽能掩盖差异却无法消除底层解析逻辑冲突——真正决定模块能否跑通的，是你所处的环境、选用的工具链以及对运行时约束的深度理解。

JavaScript 模块化不是靠“学一个教程”就能落地的，关键看你在什么环境、用什么工具链、解决什么问题。浏览器原生 import/export 不能直接跑在旧版 Node.js 或不支持 ES Modules 的浏览器里，而 CommonJS（require/module.exports）又无法在纯前端 HTML 中直接使用——模块化从来不是语法问题，是运行时约束问题。

浏览器中直接用 import 要加 type="module"

不加这个属性，HTML 里的 会把文件当传统脚本执行，遇到 export 就报 Uncaught SyntaxError: Unexpected token 'export'。

实操建议：

• 必须写成 ，哪怕只是单个文件
• 路径必须是相对或绝对 URL（./util.js 可以，util.js 不行），否则报 Failed to resolve module specifier
• 模块脚本默认是 defer 行为，且无法访问 var 声明的全局变量，也不共享 this === window

Node.js 里用 import 得配 "type": "module" 或 .mjs 后缀

Node.js 默认按 CommonJS 解析 .js 文件，即使代码里写了 export，也会报 ReferenceError: exports is not defined 或 Cannot use import statement outside a module。

实操建议：

• 在 package.json 里加 "type": "module"，之后所有 .js 都走 ES Modules
• 或者把文件改成 .mjs 后缀（如 index.mjs），无需改 package.json
• 想混用？不行：import 不能在 CommonJS 里直接调 require()，反过来也不行；跨模块需用 createRequire 或动态 import()

export default 和 export 的导入写法不能混用

导出时用 export default function foo(){}，导入就必须用 import foo from './foo.js'；如果导出是 export function bar(){}，就必须用 import { bar } from './bar.js'。写反了会静默失败或报 undefined。

常见错误现象：

• 用 import { default } from './mod.js' 去接 export default —— 实际上 default 是个名字，不是关键字，这里只是解构了一个叫 default 的导出名
• 用 import mod from './mod.js' 去接命名导出（没 default）—— mod 会是 {}，因为没有默认导出
• 动态 import('./mod.js') 返回的是 Promise，其 .then(m => m.default) 才能拿到默认导出

打包工具（如 Vite / Webpack）掩盖了模块解析细节，但错误仍会暴露在构建阶段

Vite 开箱支持 .ts、.jsx、import.meta.env，但一旦你手动改了 vite.config.js 中的 resolve.alias 或 optimizeDeps.include，就可能触发 Failed to resolve import 或热更新失效。

实操建议：

• 别在 node_modules 外硬写绝对路径别名（如 @/utils），确保 vite.config.js 的 resolve.alias 真正指向存在目录
• 第三方包若含 exports 字段（如 React 18+），Vite 会优先读它；若字段配置错误，可能加载到无 default 的 ESM 版本，导致 React is not defined
• 开发时看到 [vite] connecting... 但页面空白？检查控制台是否有 ERR_MODULE_NOT_FOUND，那通常是路径或导出名拼错了

模块化真正的复杂点不在语法，而在运行时上下文切换：同一份 export 代码，在浏览器、Node.js、打包器、测试框架里被解析的方式可能完全不同。最常被忽略的是环境判定逻辑——比如用 process.env.NODE_ENV 切换行为，却忘了它在浏览器里根本不存在。

本篇关于《JavaScript模块化开发详解教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！