javascript_如何实现模块化开发

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"。

标签： 模块化 javascript es6 java html js 前端 node.js json node vite 浏览