当前位置：首页 > 文章列表 > 文章 > 前端 > ES6模块详解：JavaScript模块化实践

ES6模块详解：JavaScript模块化实践

2026-02-21 12:41:39 0浏览收藏

JavaScript模块化已从可选项变为必答题，而ES6的import/export绝非简单的“值拷贝”——它导出的是实时绑定、依赖在编译时静态解析、不支持条件导入，必须用import()动态加载；默认导出灵活匿名，具名导出则严格按名匹配且支持重命名；Node.js中启用需明确配置"type":"module"或使用.mjs后缀，混用CommonJS需格外谨慎；更关键的是，模块间共享的是活绑定（live binding），变量修改会即时同步所有导入处——理解这些反直觉却至关重要的机制，才是正确驾驭现代JavaScript模块化的起点。

什么是JavaScript模块化与ES6模块【教程】

JavaScript模块化不是“要不要用”的问题，而是“怎么用对”的问题——ES6模块（import/export）是语言原生标准，但它的行为和你直觉里“导入一个值”完全不同：它导出的是绑定，不是快照；它加载发生在编译时，不是运行时；它不允许条件导入，哪怕只差一行if也会报错。

为什么 `import` 不能写在 `if` 里？——静态解析的硬约束

ES6模块依赖关系必须在代码执行前就确定，引擎靠静态分析构建整个依赖图。一旦把import放进条件分支、函数或循环，语法直接非法：

if (ENV === 'dev') {
  import { debug } from './debug.js'; // ❌ SyntaxError: 'import' and 'export' may only appear at the top level
}

想按需加载？用import()这个函数式动态导入（返回Promise）：

import('./utils.js').then(module => module.helper())
支持字符串模板，但路径必须是“可静态分析的”——import(`./${name}.js`) ✅，import('./' + name + '.js') ❌
常用于路由懒加载、功能开关、错误边界降级

`export default` 和 `export const x = ...` 导出的东西不一样

默认导出（export default）本质是给模块配一个“匿名出口”，导入时名字随意；具名导出（export const x = ...）则强制按名匹配，且支持解构重命名：

// math.js
export const PI = 3.14;
export default function add(a, b) { return a + b; }

// app.js
import sum, { PI as π } from './math.js'; // ✅ 名字可任意，具名导出必须用大括号
console.log(sum(1, 2), π); // 3 3.14

注意：export default只能有一个，而具名导出可以无限多个；混用时，import语句必须严格区分语法结构，写错就undefined。