JavaScript模块化是解决全局污染、依赖混乱和维护困难的核心机制，采用ES Module（import/export）为标准，需type="module"，支持命名/默认导出与导入，路径须带.js扩展名，顶层this为undefined；CommonJS仅限Node.js，require同步动态，import静态编译期解析；路径别名需构建工具配置，循环依赖易致undefined，应提取公共模块或延迟导出。
JavaScript 模块化就是把代码拆成独立、可复用、有作用域边界的文件
它不是语法糖，而是解决全局污染、依赖混乱、维护困难的核心机制。现代前端项目几乎不用 script 标签无序加载一堆 .js 文件了——那种方式下，var 声明全挤在全局，谁改了 data 变量都可能让另一个模块崩溃。
ES Module（import/export）是当前标准，必须用 type="module"
浏览器原生支持，Node.js 从 v12+ 默认启用（需文件后缀为 .mjs 或 package.json 中设 "type": "module"）。不加 type="module" 的 HTML 脚本里写 import 会直接报错：Uncaught SyntaxError: Cannot use import statement outside a module。
常见组织方式：
-
export可以是命名导出（多个）或默认导出（一个），但导入时写法必须匹配：命名导入用{ funcA, funcB }，默认导入用import utils from './utils.js' - 路径必须带扩展名（
.js），浏览器不接受import { foo } from './utils'—— 会 404 - 模块顶层
this是undefined，不是window；var不挂到全局，变量天然私有
/* math.js */
export function add(a, b) {
return a + b;
}
export const PI = 3.14159;
/ main.js /
import { add, PI } from './math.js';
console.log(add(2, 3), PI); // 5 3.14159
CommonJS（require/module.exports）只适用于 Node.js 环境
它不支持浏览器原生运行，打包工具（如 Webpack、Vite）能把它转成 ES Module，但纯 HTML 里直接 script 引入会报 require is not defined。别在浏览器端徒手试 require('./util')。
关键差异点：
-
require是同步执行、动态可写（比如条件加载），import是静态声明、编译期解析（不能写在if里） -
module.exports = { x: 1 }和exports.x = 1行为不同：后者只是给
module.exports对象加属性，前者是完全替换整个导出对象 - Node.js 中
require缓存模块实例，多次require('./config')拿到的是同一个对象引用
模块路径别名和循环依赖是实际项目中最容易卡住的两个点
路径别名（如用 @/components/Button 代替 ../../src/components/Button）需要构建工具支持：Vite 配 resolve.alias，Webpack 配 resolve.alias，TS 还得同步配 tsconfig.json 的 paths。漏配一个，编辑器提示和运行时就对不上。
循环依赖（A → B → A）在 ES Module 下会得到 undefined，因为导出对象尚未初始化完成；CommonJS 则返回已执行部分的对象（可能缺字段）。遇到 Cannot destructure property 'xxx' of 'undefined' 且调用链绕回自身，大概率是这个原因。
解法不是硬扛，而是提取公共逻辑到第三个模块，或者把部分导出延迟到函数内（export function getHelper() { return helper; }）。
