17370845950

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）：适合暴露多个具名成员

/* 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）：按名称精确引入，必须用花括号

/* 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+中