ES6模块导入导出方法详解

学习文章要努力，但是不要急！今天的这篇文章《ES6模块怎么导入导出？JavaScript模块化编程详解》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

JavaScript模块化以export/import为核心，ES6模块（ESM）为原生标准，支持命名导出、默认导出及混合使用；导入需在顶层，路径须明确，模块单例且按依赖顺序执行。

JavaScript模块化编程的核心是用 export 暴露功能，用 import 引入依赖，ES6模块（ESM）是原生标准，语法简洁、静态分析、支持树摇，比CommonJS更适配现代前端工程。

ES6模块的导出方式

一个模块可以按需导出变量、函数、类或默认成员：

• 命名导出（Named Export）：可导出多个，导入时必须用对应名称，支持重命名

export const PI = 3.14;
export function add(a, b) { return a + b; }
export class Calculator { ... }

• 默认导出（Default Export）：每个模块最多一个，导入时名称可自定义，更灵活

export default function multiply(a, b) { return a * b; }

• 也可混合使用：命名导出 + 一个默认导出

ES6模块的导入方式

导入必须在顶层作用域（不能在条件或函数内），且路径需为字符串字面量：

• 导入全部命名成员：import * as math from './math.js' → 用 math.PI、math.add
• 解构式导入命名成员：import { PI, add } from './math.js' → 直接用 PI、add
• 重命名导入：import { add as sum } from './math.js' → 使用 sum(2, 3)
• 导入默认成员：import multiply from './math.js'（注意无大括号）
• 同时导入默认 + 命名：import multiply, { PI } from './math.js'

模块路径与执行特性

ES6模块路径必须带扩展名（如 .js）或以 /、./、../ 开头，不支持 Node 默认省略后缀；模块是单例，多次导入同一模块只执行一次，且按依赖图顺序执行（从入口开始深度优先）。

• 浏览器中需在