当前位置：首页 > 文章列表 > 文章 > 前端 > ES6模块详解：JavaScript模块化入门指南

ES6模块详解：JavaScript模块化入门指南

2026-02-08 09:22:36 0浏览收藏

一分耕耘，一分收获！既然打开了这篇文章《JavaScript模块化与ES6模块详解》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

ES6模块导出的是绑定而非值，加载在编译时完成且不支持条件导入；需用import()动态加载；export default为匿名导出，具名导出需按名匹配；Node.js中需配置"type":"module"或使用.mjs后缀；绑定机制导致变量修改实时同步。

什么是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。