17370845950

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提示体验