JavaScript模块化详解及ES6用法教程

一分耕耘，一分收获！既然都打开这篇《JavaScript模块化是什么？ES6模块怎么用》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

ES6模块是浏览器和Node.js原生支持的标准化方案，需用type="module"启用，强制静态分析、支持tree-shaking；导出分命名导出（多个）和默认导出（一个），导入路径须带扩展名或相对/绝对前缀，循环依赖返回已初始化对象而非执行结果。

JavaScript 模块化不是“要不要用”的问题，而是“怎么避免 ReferenceError 和命名污染”的实际需求。ES6 模块（import/export）是目前浏览器和 Node.js（v14.13+ 默认启用）都原生支持的方案，它强制静态分析、支持树摇（tree-shaking），比 CommonJS 更适合现代前端工程。

ES6 模块必须用 type="module" 才能运行

在 HTML 中直接使用 import 会报错：Uncaught SyntaxError: Cannot use import statement outside a module。这是因为脚本默认是“传统脚本”，不是模块。

解决办法只有一条：

• HTML 中引入脚本时加 type="module" 属性
• 模块脚本自动启用严格模式、顶层 this 为 undefined、不共享全局作用域
• 不支持 require() 或 __dirname 等 CommonJS 特性

export 有两种写法：命名导出和默认导出

命名导出（export）适合导出多个值，如工具函数、常量；默认导出（export default）每个文件只能有一个，适合导出主类或主逻辑。

常见错误：

• 把 export default function foo() {} 写成 export function foo() {} —— 后者是命名导出，导入时必须用 { foo }
• 在同一个文件里混用 export default 和 export，没问题；但导入时语法不能搞混
• 动态值（如 export const now = Date.now()）导出的是初始快照，不是实时引用

// math.js
export const PI = 3.14;
export function add(a, b) { return a + b; }
export default function multiply(a, b) { return a * b; }
// main.js
import multiply, { PI, add } from './math.js'; // 默认导出不加花括号，命名导出加

import 路径必须带扩展名或以 /、./、../ 开头

ES6 模块规范要求导入路径是“明确的字符串字面量”，不允许省略扩展名（不像 Node.js 的 require() 会自动尝试 .js、.json）。

典型报错：Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/plain" —— 很可能是因为路径没写对，服务器返回了 404 页面文本。

• 浏览器中路径必须是相对（./utils.js）、绝对（/src/index.js）或完整 URL（https://cdn.example.com/lib.js）
• 不能写 import { fn } from 'utils'（无扩展名 + 无路径前缀 → 解析失败）
• Vite / Webpack 等构建工具可以配置别名，但那是构建时行为，不影响原生模块解析逻辑

循环依赖下，ES6 模块返回的是“已初始化对象”，不是“执行完成的结果”

如果 A.js 导入 B.js，而 B.js 又导入 A.js，ES6 模块不会报错，但变量可能为 undefined —— 因为导出对象在模块执行前就已创建，后续赋值才发生。

这和 CommonJS 的“导出即执行结果”不同，容易引发静默 bug。

• 避免在模块顶层直接读取对方导出的变量，改用函数封装访问逻辑
• 优先用默认导出类/对象，再在实例方法中调用对方模块，而不是在顶层 import 后立刻使用
• 调试时可在控制台打印 import.meta.url 确认当前模块加载路径是否符合预期

模块化真正难的不是语法，是理解“静态解析”和“执行时机”的分离——比如 export 不等于“此刻的值”，而是“这个绑定将来会被赋什么”。

好了，本文到此结束，带大家了解了《JavaScript模块化详解及ES6用法教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！