JavaScript代码如何实现模块化管理？

JavaScript模块化主要通过ES6的import/export语法实现，需配合构建工具或现代运行时；每个文件为独立模块，支持命名/默认导出与导入，浏览器需type="module"，Node.js需package.json设"type":"module"。

JavaScript模块化管理主要通过ES6的import/export语法实现，配合构建工具或现代运行时环境支持，让代码按功能拆分、独立维护、按需加载。

使用ES6原生模块语法

这是目前最标准、浏览器和Node.js（v14+）都原生支持的方式。每个文件默认是一个独立模块，变量不会自动挂载到全局。

• 用export导出函数、类、对象或基本值，可命名导出或默认导出
• 用import导入，路径必须带扩展名（如.js）或以/./../开头
• 浏览器中需在<script type="module"></script>标签中使用，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语句，合并模块、处理路径别名、支持动态导入、代码分割等。

标签： react javascript es6 java js node.js json node vite typescri