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

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《JavaScript模块化是什么？ES6模块怎么用？》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

ES6模块必须顶层import因静态解析需预建依赖图；动态导入用import()；export分具名（绑定）和默认（值快照）；浏览器需type="module"且本地启服务，Node需.mjs或"type":"module"。

JavaScript 模块化是把代码拆成独立、可复用、有作用域边界的文件；ES6 模块（import/export）是原生支持的静态模块系统，必须在编译时确定依赖关系，不能动态拼接模块名。

为什么 import 必须写在顶层，不能放在 if 或函数里？

因为 ES6 模块是“静态解析”的：浏览器或打包工具（如 Webpack、Vite）在加载脚本时就要分析所有 import 语句，提前构建依赖图。把它塞进条件逻辑里，会导致解析失败。

• import 出现在函数内 → 报错 Cannot use import statement outside a module 或 Unexpected token 'import'
• 真要条件加载？用 import() 动态导入（返回 Promise），它是运行时行为，合法且常用
• 注意：import() 的参数必须是字符串字面量或模板字符串（如 import(`./pages/${page}.js`) 在某些构建工具中可能不被支持，Vite 支持，Webpack 需配置）

export 有哪几种写法？导出默认值和具名值有什么区别？

具名导出（export）和默认导出（export default）本质不同：前者导出的是绑定（binding），后者导出的是值（value）的引用快照；且一个模块只能有一个 default，但可以有多个具名导出。

• 具名导出：export const foo = 1;、export function bar() {}、export { foo, bar };
• 默认导出：export default function() {} 或 export default class {} 或 export default 42;
• 导入时：具名导入必须用大括号 import { foo } from './mod.js'；默认导入不用大括号 import MyFunc from './mod.js'（名字可任意）
• 混用时注意：默认导出 + 具名导出可以共存，但导入时要分开写，例如 import MyDefault, { namedA, namedB } from './mod.js'

为什么在浏览器中直接用 import 会报错 Cross-origin requests are not supported？

因为浏览器对 type="module" 脚本执行严格的 CORS 策略：即使本地双击打开 HTML 文件（file:// 协议），也会拒绝加载本地 import 的模块 —— 这不是 bug，是规范要求。

• 解决办法只有两个：起一个本地服务器（如 npx serve、python3 -m http.server、Vite 的 vite preview）
• HTML 中 script 标签必须写 ，否则 import 不生效
• Node.js 环境下需确保文件后缀是 .mjs，或 package.json 中设置了 "type": "module"，否则 import 会被当成语法错误

export const API_URL = 'https://api.example.com';
export function fetchData(id) {
  return fetch(`${API_URL}/items/${id}`);
}
export default class DataService {
  static async loadAll() {
    return (await fetch(`${API_URL}/items`)).json();
  }
}

模块路径必须带扩展名（./utils.js）或斜杠（./utils/），不能省略为 ./utils —— 这在 Node.js 14+ ESM 中是硬性要求，浏览器也一样。漏掉后缀是新手最常卡住的地方。

终于介绍完啦！小伙伴们，这篇关于《JavaScript模块化详解及ES6模块使用教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！