JavaScript模块化主要通过ES6的import/export语法实现，需配合构建工具或现代运行时；每个文件为独立模块，支持命名/默认导出与导入，浏览器需type="module"，Node.js需package.json设"type":"module"。
JavaScript模块化管理主要通过ES6的import/export语法实现，配合构建工具或现代运行时环境支持，让代码按功能拆分、独立维护、按需加载。
使用ES6原生模块语法
这是目前最标准、浏览器和Node.js（v14+）都原生支持的方式。每个文件默认是一个独立模块，变量不会自动挂载到全局。
- 用
export导出函数、类、对象或基本值，可命名导出或默认导出 - 用
import导入，路径必须带扩展名（如.js）或以/./../开头 - 浏览器中需在
标签中使用，Node.js中需将package.json的"type"设为"module"
示例：
// math.js
export function add(a, b) { return a + b; }
export const PI = 3.14159;
export default class Calculator { ... }
// main.js
import Calculator, { add, PI } from './math.js';
console.log(add(2, 3), PI); // 5 3.14159
借助打包工具统一管理依赖
实际项目中常
使用Webpack、Vite或Rollup等工具，它们能解析import语句，合并模块、处理路径别名、支持动态导入、代码分割等。
- 配置别名（如
@/utils指向src/utils），避免冗长相对路径 - 利用
import()动态导入实现懒加载，提升首屏性能 - 启用Tree Shaking自动剔除未使用的导出内容
兼容旧环境的方案（按需选择）
若需支持不支持ES模块的老旧浏览器或环境，可借助Babel转译 + 模块格式转换（如转成CommonJS或UMD），再由打包工具整合。
- Babel配合
@babel/preset-env可将import/export转为require/module.exports - 直接使用CommonJS（Node.js早期标准）也可行，但仅限Node环境或经打包后使用
- 不推荐手动写AMD或全局变量方式，维护成本高且易冲突
模块设计实用建议
模块化不只是语法，更是组织逻辑的方式。
- 一个模块只做一件事，导出尽量精简，避免“大而全”的工具包
- 优先使用命名导出，便于按需解构；默认导出适合模块主功能（如React组件、单例类）
- 避免循环依赖：A导入B，B又导入A——可通过提取公共逻辑到第三个模块解决
- 类型定义（如TypeScript）与模块导出保持同步，提升协作和IDE提示体验
