JavaScript模块化解决代码混乱与依赖问题，通过ES6的import/export实现文件间功能导入导出，浏览器需用type="module"加载，Node.js支持CommonJS和ESM，大型项目常用Webpack或Vite等工具打包，提升可维护性与复用性。
JavaScript 的模块化开发是为了解决代码组织混乱、命名冲突和依赖管理的问题。随着项目规模变大，把所有代码写在一个文件里会变得难以维护。模块化让开发者可以把功能拆分到不同的文件中，每个文件独立封装，按需导入导出。
1. 使用 ES6 模块（ESM）
现代 JavaScript 原生支持模块化，使用 import 和 export 语法。
● 导出模块：
在文件中使用 export 关键字暴露变量、函数或类。
立即学习“Java免费学习笔记（深入）”；
// math.js
export const add = (a, b) => a + b;
<p>export function multiply(a, b) {
return a * b;
}</p><p>const PI = 3.14159;
export { PI };
● 导入模块：
在其他文件中通过 import 引入所需内容。
// main.js
import { add, multiply } from './math.js';
console.log(add(2, 3)); // 5
console.log(multiply(4, 5)); // 20
● 默认导出：
一个模块可以有一个默认导出，导入时可自定义名称。
// utils.js
export default function() {
console.log('默认函数');
}
<p>// main.js
import myFunc from './utils.js';
myFunc();
2. 在浏览器中使用模块
要在 HTML 中加载模块，script 标签必须加上 type="module"。
<script type="module" src="./main.js"></script>
模块脚本默认延迟执行，且遵循同源策略，本地测试建议使用服务器（如 Live Server）。
3. 使用 Node.js 中的模块
Node.js 支持两种模块系统：CommonJS（传统）和 ES6 模块。
● CommonJS 方式（使用 require / module.exports）：
// math.js
function divide(a, b) {
return a / b;
}
module.exports = { divide };
<p>// app.js
const { divide } = require('./math');
console.log(divide(10, 2));
● 使用 ES6 模块（Node.js 需要 .mjs 扩展名或 package.json 中设置 "type": "module"）：
// package.json
{
"type": "module"
}
<p>// math.js
export const subtract = (a, b) => a - b;</p><p>// app.js
import { subtract } from './math.js';
4. 使用打包工具（如 Webpack、Vite）
在实际项目中，通常使用构建工具来处理模块化，它们能：
- 合并多个模块为少量文件
- 支持 import/export、CommonJS、AMD 等多种格式
- 实现代码分割、懒加载
- 转换新语法（配合 Babel）
例如 Vite 创建项目后，默认支持 ES 模块，开发体验快，适合现代前端开发。
基本上就这些。选择哪种方式取决于你的运行环境和项目需求。浏览器推荐用 ES6 模块 + type="module"，Node.js 可选 ESM 或 CommonJS，大型项目建议搭配构建工具使用。模块化让代码更清晰、可复用性更强，是现代 JavaScript 开发的基础。
