javascript es modules中聚合导出多个变量最常用方式是命名导出(export { a, b, c });也可用默认导出聚合对象、混合导出或export * from跨模块聚合,后者支持tree-shaking且适合大型项目。

在 JavaScript ES Modules 中,导出包含多个变量的聚合模块,最常用且推荐的方式是使用 命名导出(named exports),配合 默认导出(default export) 或单独的 export { ... } 语法。关键在于“聚合”——即把多个变量、函数、类等统一整理后对外暴露,便于使用者按需导入。
用命名导出聚合多个变量
这是最直接的方式:在模块文件中定义多个变量,再通过 export { a, b, c } 一次性导出。
例如:
// mathUtils.js
const PI = 3.14159;
const MAX_RETRY = 3;
const DEFAULT_TIMEOUT = 5000;
<p>function add(a, b) { return a + b; }
function multiply(a, b) { return a * b; }</p><p>// 聚合导出所有变量和函数
export { PI, MAX_RETRY, DEFAULT_TIMEOUT, add, multiply };</p>使用时可选择性导入:
import { PI, add } from './mathUtils.js';
console.log(PI, add(2, 3)); // 3.14159 5
用对象解构+默认导出实现“命名空间式”聚合
如果希望使用者通过一个统一入口访问全部内容(类似命名空间),可以创建一个聚合对象并默认导出:
// apiClient.js
const BASE_URL = 'https://api.example.com';
const TIMEOUT = 10000;
<p>function get(url) { /<em> ... </em>/ }
function post(url, data) { /<em> ... </em>/ }</p><p>// 聚合成一个对象
const client = {
BASE_URL,
TIMEOUT,
get,
post
};</p><p>export default client;</p>导入时:
import client from './apiClient.js';
console.log(client.BASE_URL);
client.get('/users');
⚠️ 注意:这种方式不支持静态分析下的 tree-shaking(无法自动移除未使用的成员),适合小型工具模块或明确需要整体使用的场景。
混合导出:命名导出 + 默认导出
ESM 允许同时存在命名导出和默认导出。常见做法是:默认导出主类/主函数,命名导出辅助常量或工具函数。
// logger.js
const LEVELS = { DEBUG: 1, INFO: 2, ERROR: 3 };
const DEFAULT_LEVEL = LEVELS.INFO;
<p>class Logger {
constructor(level = DEFAULT_LEVEL) {
this.level = level;
}
log(msg) { console.log(msg); }
}</p><p>// 默认导出主类,命名导出常量
export default Logger;
export { LEVELS, DEFAULT_LEVEL };</p>导入方式灵活:
import Logger, { LEVELS } from './logger.js'; // 默认 + 命名
// 或只导入命名项
import { LEVELS, DEFAULT_LEVEL } from './logger.js';
用 export * from 实现跨模块聚合(推荐用于大型项目)
当模块本身不定义新内容,而是整合其他模块的导出时,可用 export * from 进行“转发聚合”:
// index.js —— 聚合入口
export { default as HttpClient } from './http/HttpClient.js';
export { parseJSON, stringifyQuery } from './utils/serializers.js';
export { PI, TAU } from './constants/math.js';
export * as validators from './validators/index.js'; // 聚合为命名空间
这样使用者可通过单个路径导入整个生态:
import { HttpClient, PI } from './index.js';
import * as validators from './index.js'; // 获取 validators 下所有命名导出
import { parseJSON } from './index.js';
✅ 这种方式利于维护、支持 tree-shaking,是构建公共库或项目模块化架构的常用实践。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











