请求解析JavaScript三种模块导出方式的差异

嘿，这个问题问得特别好——很多刚接触ES模块的开发者都会在这几种导出方式上犯迷糊，我来给你拆解清楚这三种最常用的导出方式，以及它们在使用场景和行为上的核心差异：

1. 默认导出（export default） #

这是最灵活的一种导出方式，每个模块只能有一个默认导出。你可以导出任意类型的值——函数、对象、字符串、数字都行，甚至可以导出匿名内容（不过实际写的时候为了可读性，还是建议给导出的内容起个名字）。

举个例子：

// utils.js
// 导出一个命名函数作为默认导出
export default function add(a, b) {
  return a + b;
}

// 也可以导出匿名函数，效果完全一样
// export default (a, b) => a + b;

导入的时候，你可以随便给它起名字，不用和导出的名字一致，非常自由：

// app.js
import myAddFunction from './utils.js';
console.log(myAddFunction(1, 2)); // 输出 3

适用场景：当这个模块的核心功能就是提供这一个东西的时候，比如一个独立的工具函数、一个React组件，用默认导出会让导入方的代码更简洁。

2. 直接命名导出（export [标识符]） #

这种是最严谨的导出方式，一个模块可以有多个命名导出。每个导出的内容必须有明确的名字，导入的时候必须和导出的名字完全匹配（如果觉得名字不合适，也可以用as重命名）。

例子来了：

// utils.js
// 导出一个常量
export const PI = 3.14159;
// 导出一个函数
export function multiply(a, b) {
  return a * b;
}

导入的方式有好几种：

// app.js
// 1. 直接导入指定的命名导出
import { PI, multiply } from './utils.js';
// 2. 给导出的内容重命名
import { PI as circlePI, multiply as times } from './utils.js';
// 3. 把所有命名导出打包成一个对象
import * as utils from './utils.js';
console.log(utils.PI, utils.multiply(2, 3)); // 输出 3.14159 6

适用场景：当模块需要导出多个独立的功能、常量或者工具时，用命名导出会更清晰，比如一个包含多种工具函数的工具库，或者一组配置常量集合。

3. 批量命名导出（export { ... }） #

这种其实是命名导出的“语法糖”写法，适合你先在模块内部写完所有逻辑，最后再统一决定哪些内容对外暴露的场景。它的本质和直接在定义前加export完全一样，只是写法更集中，方便管理和维护。

看示例：

// utils.js
// 先在内部定义好所有内容
const PI = 3.14159;
function multiply(a, b) {
  return a * b;
}
function subtract(a, b) {
  return a - b;
}

// 最后统一导出需要对外暴露的内容
export { PI, multiply, subtract };

// 也可以给导出的内容重命名再对外暴露
// export { PI as circlePI, multiply as times };

导入方式和普通命名导出完全一致，没有任何区别：

import { PI, subtract } from './utils.js';
console.log(subtract(5, 2)); // 输出 3

适用场景：当你需要在模块内部先完成所有逻辑的编写、测试，最后再统一整理对外暴露的API时，这种写法会让代码结构更清晰，避免到处零散地加export关键字。

核心差异总结 #

• 数量限制：默认导出每个模块只能有1个，命名导出（包括批量）可以有N个；
• 导入灵活性：默认导出导入时可以自定义名字，命名导出必须匹配原名称（或用as重命名）；
• 使用场景：默认导出适合模块核心单一功能，命名导出适合多组件/工具的集合导出。

内容的提问来源于stack exchange，提问作者user7785497