17370845950

JavaScript模块化开发通过拆分代码为独立单元提升可维护性；ESM是原生标准，支持静态分析与树摇；CommonJS适用于Node.js服务端；模块加载器如RequireJS解决动态加载；打包工具如Webpack、Vite构建时处理依赖并生成bundle。

JavaScript模块化开发通过将代码拆分为独立、可复用的单元来提升可维护性和协作效率；模块加载器负责按需解析依赖、加载脚本、执行并管理模块作用域与导出值。

ES Module（ESM）是现代标准方案

ES6引入的import/export语法是浏览器和Node.js原生支持的模块机制。它基于静态分析——在代码执行前就能确定依赖关系，支持树摇（tree-shaking）和循环依赖检测。

• 使用export导出变量、函数或类，支持命名导出和默认导出
• 使用import导入，路径必须是字符串字面量（不能拼接），且只能出现在顶层作用域
• 浏览器中需在中使用，自动启用严格模式、延迟执行、CORS校验
• Node.js中需文件后缀为.mjs或package.json中设置"type": "module"

CommonJS适合Node.js服务端环境

Node.js早期采用的模块系统，以require()和module.exports为核心，运行时动态加载，支持表达式路径和条件引入。

• require()立即执行被加载模块，并缓存其module.exports对象
• 每个模块有独立作用域，exports是module.exports的引用别名
• 不支持浏览器原生运行，需借助打包工具（如Webpack）转译或模拟
• 与ESM互操作需注意：ESM中import xxx from 'cjs-module'实际导入的是default属性

模块加载器（如SystemJS、RequireJS）解决动态加载问题

在ESM普及前，前端需要在无构建环境下按需加载模块。加载器通过注入标签、XHR请求或Fetch获取源码，再用eval或new Function执行，同时维护模块注册表和依赖图。

• RequireJS使用AMD规范，依赖前置声明：define(['a', 'b'], function(a, b) { ... })
• SystemJS更灵活，支持AMD、CommonJS、ESM等多种格式，可配置路径映射和包版本
• 现代场景中，这类加载器多被ESM动态导入import()替代，后者返回Promise，支持懒加载和代码分割

打包工具（如Webpack、Vite）是模块化的“编译中枢”

它们不是运行时加载器，而是构建时分析整个依赖图，将模块转换为单个或多个bundle，并注入自己的模块运行时（runtime）来模拟require或__webpack_require__。

• Webpack通过ModuleGraph追踪导入/导出关系，支持HMR（热更新）和分包策略
• Vite利用ESM原生能力，在开发时由浏览器原生加载模块，仅对需转换的代码（如Vue/Svelte组件）进行按需编译
• 打包产物中每个模块被包裹在闭包中，避免全局污染，导出值通过内部模块对象传递