JavaScript模块化是将代码拆分为独立可复用单元的方式，ES6模块（ESM）为原生标准，通过export/import实现依赖显性化、作用域隔离与按需加载，解决命名冲突、依赖错乱等问题。
JavaScript模块化是一种将代码拆分成独立、可复用单元的组织方式，每个单元（即模块）拥有自己的作用域，不污染全局环境，同时能明确声明依赖和对外接口。ES6模块（ESM）是语言原生支持的标准方案，无需额外工具即可在现代浏览器和Node.js中直接使用。
模块化解决的实际问题
传统脚本通过多个
- 命名冲突：两个文件都定义
const utils = {...}，后者覆盖前者 - 依赖错乱：若
api.js依赖utils.js，但HTML中api.js写在前面，运行时报utils is not defined - 无法按需加载：哪怕只用一个函数，也得加载整个文件
- 维护困难：修改一处逻辑，可能因隐式依赖影响多个页面
ES6模块的核心语法：export 和 import
一个模块文件（如math.js）默认封闭，外部不可见内部变量。要共享内容，必须显式导出；要使用他人功能，必须显式导入。
命名导出（Named Export）：适合暴露多个具名成员
立即学习“Java免费学习笔记（深入）”；
/* math.js */
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export class Calculator {
multiply(x, y) { return x * y; }
}命名导入（Named Import）：按名称精确引入，必须用花括号
CPWEB企业网站管理系统（以下称CPWEB）是一个基于PHP+Mysql架构的企业网站管理系统。CPWEB 采用模块化方式开发，功能强大灵活易于扩展，并且完全开放源代码，面向大中型站点提供重量级企业网站建设解决方案。CPWEB企业网站管理系统 2.2 Beta 测试版本，仅供测试，不建议使用在正式项目中，否则发生任何的后果自负。
/* app.js */
import { PI, add, Calculator } from './math.js';
console.log(PI); // 3.14159
console.log(add(2, 3)); // 5默认导出（Default Export）：每个模块最多一个，导入时不需花括号，名称可自定
/* logger.js */
export default function log(msg) {
console.info('[LOG]', msg);
}
/ main.js /
import logger from './logger.js'; // 名称任意，如 import myLog from './logger.js'
logger('App started');
混合使用也常见：
/* helpers.js */
export const isEmpty = (val) => val == null || val === '';
export default function debounce(fn, delay) { /* ... */ }
/ use.js /
import debounce, { isEmpty } from './helpers.js';
在HTML中启用ES6模块的关键细节
浏览器中使用ES6模块，必须在
否则会报错：“Cannot use import statement outside a module”。注意：
- 模块脚本自动启用严格模式，禁止
with、八进制前缀等不安全语法 - 模块路径必须带扩展名（如
./utils.js），不能省略.js - 模块路径支持相对路径（
./、../）和绝对路径（/scripts/），但不支持纯模块名（如fs）——除非用构建工具或导入映射 - 模块是单例：同一路径被多次
import，只执行一次，后续导入复用缓存结果
模块化带来的实际好处
不只是语法变化，它改变了开发逻辑：
- 静态可分析：工具能在打包前就识别哪些函数没被用到（Tree-shaking），自动剔除无用代码
-
依赖显性化：打开一个文件，顶部
import语句立刻告诉你它靠谁、提供什么 -
天然解耦：修改
formatDate函数，只要签名不变，所有导入它的文件都不受影响 -
环境统一：同一套
import/export语法，既跑在Chrome里，也跑在Node.js v14.3+中
